1、引入jQuery.js、jSignature.js （jSignature是基于jquery的插件 所以要先引入jQuery，jSignature.js 下载地址https://github.com/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;base64 i.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转换为blob dataURLtoBlob: 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转换为file blobToFile: function(theBlob, fileName){ theBlob.lastModifiedDate = new Date(); theBlob.name = fileName; return theBlob; }, //调用 var blob = dataURLtoBlob(base64Data); var file = blobToFile(blob, imgName);参考：https://blog.csdn.net/weixin_44589491/article/details/104597071
