js 电子签名涂鸦，且支持转为png图片

背景：有个业务需要用户签署一个承诺书，电子签名，并生成图片，所以就看了一些线上签名且生成图片的技术和插件，自己研究了一下。

1. elesigncode 第三方插件

首先在github看到【elesigncode】这个现成的插件，可以实现我的业务需求。

2. elesign 自己开发的一个线上签名

看了别人做的后，我就在想这个电子涂鸦和生成图片的核心技术点是什么。然后看到了这篇文档：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502101363.html。线上涂鸦的核心，是通过canvas进行绘制，鼠标每move一下，就绘制一条线，生成图片核心是【document.getElementById("myCanvas").toDataURL("image/png")】。

自己做的一个demo，可以实现更换笔的粗细、颜色、转为png、清空功能。

代码仓库：github地址 : https://github.com/lishengqin/elesign

在线访问地址：https://lishengqin.github.io/elesign/#/graffiti

【npm install elesign】在项目中安装组件在项目中使用。

ps：目前有个缺陷，无法设置画布的初始值，这个正在处理。

今天有时间处理了一下初始值问题，初始值核心本质就是将 通过canvas 的 toDataURL() 方法，生成图片，然后再通过画布的drawImage方法回显出来。