1、引入jQuery.js、jSignature.js （jSignature是基于jquery的插件 所以要先引入jQuery，jSignature.js 下载地址/brinley/jSignature）
2、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>
3、初始化jSignature 在初始化的时候会接受一个对象作为参数
var param= {width: '100%',//签名区域的宽height: '300px',//签名区域的高cssclass: 'zx11',//画布的类 可以写自定义的样式UndoButton:true,//撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找signatureLine: false,//去除默认画布上那条横线lineWidth: '1' //画笔的大小};$("#signature").jSignature(param);
4、画布初始化后需要添加两个事件保存和清除
//jSignature提供了清除的API reset$('#clear').click(function () {$("#signature").jSignature("reset");});//提交$('#save').click(function () {if( $("#signature").jSignature('getData', 'native').length === 0){alert("请签名后再提交！");return;}var con=confirm("提交后不可更改，确认提交签名？");if(con===false) return;//将签名的画布保存为base64编码字符串 默认是png的var datapair = $("#signature").jSignature("getData","image");var i = new Image();i.src = "data:" + datapair[0] + "," + datapair[1];console.log(datapair[0]);//image/png;base64i.image = datapair[1];console.log(i.image);}
5、base64转file
①通过new File()将base64转换成file文件，此方式需考虑浏览器兼容问题
//将base64转换为文件dataURLtoFile: function(dataurl, filename) {var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, {type: mime });},//调用var file = dataURLtoFile(base64Data, imgName);
②先将base64转换成blob，再将blob转换成file文件，此方法不存在浏览器不兼容问题
//将base64转换为blobdataURLtoBlob: function(dataurl) {var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], {type: mime });},//将blob转换为fileblobToFile: function(theBlob, fileName){theBlob.lastModifiedDate = new Date();theBlob.name = fileName;return theBlob;},//调用var blob = dataURLtoBlob(base64Data);var file = blobToFile(blob, imgName);
参考：/weixin_44589491/article/details/104597071
