疫情期间的社区出入系统需求 提交体温前需要手写签名

实现方法

1. 引入jQuery.js （jSignature是基于jquery的插件 所以要先引入jQuery）
2. 引入jSignature.js 下载地址https://github.com/brinley/jSignature
3. html结构

<div class="container"><div id="signatureparent"><div id="signature"></div></div><br><button type="button" class="btn btn-primary btn-block" id="save">保存</button><button type="button" class="btn btn-default btn-block" id="clear">清除</button>
</div>

4.初始化jSignature 在初始化的时候会接受一个对象作为参数

var param= {width: '100%',//签名区域的宽height: '300px',//签名区域的高cssclass: 'zx11',//画布的类 可以写自定义的样式UndoButton:true,//撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找signatureLine: false,//去除默认画布上那条横线lineWidth: '1' //画笔的大小};$("#signature").jSignature(param);

5.画布初始化后需要添加两个事件保存和清除

//jSignature提供了清除的API reset
$('#clear').click(function () {$("#signature").jSignature("reset");});
//提交$('#save').click(function () {//获取签名生成的图片 默认是png的var datapair = $("#signature").jSignature("getData", "image");var i = new Image();i.src = "data:" + datapair[0] + "," + datapair[1];i.image = datapair[1];console.log(i.image);}