html+canvas实现在线签名功能

1、在https://www.bootcdn.cn/jSignature/上复制标签引入到html文件中，并保证引入在Jquery标签之后。
只引入下面两个标签即可：

<script src="https://cdn.bootcss.com/jSignature/2.1.2/flashcanvas.min.js"></script>
<script src="https://cdn.bootcss.com/jSignature/2.1.2/jSignature.min.js"></script>

2、初始化
新建div.g-signatrue-body，通过jSignature的方法初始化如下：

$(".g-signatrue-body").jSignature();

3、有可能会遇到初始化的canvas大小无法撑开div元素的情况，此时需要使用css来微调，如下：

.g-signatrue-body>.jSignature {
    height: 100%!important;
}

这样签名的画图就和div的大小相等了。

4、重置画布

$(".g-signatrue-body").jSignature('reset');

可以通过click事件触发上述代码

5、获取画布内容base64

$(".g-signatrue-body").jSignature('getData','default');

上述语句返回一个base64字符串

6、涉及到画布内容回显
可以将第5步返回的base64字符串赋值到img标签的src中。

7、后退一步签名操作(网上教程，未尝试)

$(".g-signatrue-body").jSignature({'UndoButton':true});

8、扩展方法，修改笔触颜色和笔触粗细
只要在初始化的代码中加入参数即可，例如

$(".g-signatrue-body").jSignature({color:"#00f",lineWidth:5});

9、其它功能请参考官网（部分情况需翻墙）
http://www.unbolt.net/jSignature/