jSignature 插件实现手写电子签名

需求：需要在合同的最后加一个签名区，让用户能用鼠标或手指进行签名。

解决方案：jSignature 插件，依赖jquery。

index.html

    //#canvasDiv 就是书写区域，img 是书写完成后转为图片
	<div class="person" style="">
				乙方(持卡人及卡片使用人签字)：</br>
			    <div id="canvasDiv"></div>
	            <button id="btn_clear" style="">重写</button>
	            <button id="btn_submit">确定</button>
				<img id="qmimg" />
    </div>

index.js

<script src="./js/jquery-2.1.4.min.js"></script>
    <script src="./js/jSignature.min.js"></script>
    <script>
        $(function () {
   
                    
                    var param = {
   
                        width: '400px', //签名区域的宽
                        height: '100px', //签名区域的高
                       // cssclass: 'cans', //画布的类 可以写自定义的样式
                        UndoButton: true, //撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找
                        signatureLine: false, //去除默认画布上那条横线
                        lineWidth: '1' //画笔的大小
                    };
                  
                    //初始化
                    $("#canvasDiv").jSignature(param);
                    //jSignature提供了清除的API reset
                    $('#btn_clear').click(function () {
   
                        $("#canvasDiv").jSignature("reset");
                    });
                    //确认
                    $('#btn_submit').click(function () {
   
                            //获取签名生成的图片 默认是png的
                            var datapair = $("#canvasDiv").jSignature("getData", "image");
                            var i = new Image();
                            i.src = "data:" + datapair[0] + "," + datapair[1];
                            i.image = datapair[1];
                            // console.log(i.image);
                            //i.image 是一串字符串
                            $('#qmimg').attr('src',`data:image/png;base64,${
     i.image}`);
                            $("#canvasDiv").hide();
		 	                $("#btn_clear").hide();
		 	                $("#btn_submit").hide();
                           
                        })
                    })
	</script>

jSignature.min.js 文件，https://github.com/brinley/jSignature 这是github上的地址，也有这个文件

/*

jSignature v2 "2018-11-06T13:56" "commit ID 89c22b348ab2e1d92a928d8fd992f175e8bc5cbd"
Copyright (c) 2012 Willow Systems Corp http://willow-systems.com
Copyright (c) 2010 Brinley Ang http://www.unbolt.net
MIT License <http://www.opensource.org/licenses/mit-license.php>


Simplify.js BSD 
(c) 2012, Vladimir Agafonkin
mourner.github.com/simplify-js


base64 encoder
MIT, GPL
http://phpjs.org/functions/base64_encode
+   original by: Tyler Akins (http://rumkin.com)
+   improved by: Bayron Guevara
+   improved by: Thunder.m
+   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+   bugfixed by: Pellentesque Malesuada
+   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+   improved by: Rafal Kukawski (http://kukawski.pl)


jSignature v2 jSignature's Undo Button and undo functionality plugin


jSignature v2 jSignature's custom "base30" format export and import plugins.


jSignature v2 SVG export plugin.

*/
(function(){
   function q(a){
   var b=a.css("color"),c;a=a[0];for(var g=!1;a&&!c&&!g;){
   try{
   var d=$(a).css("background-color")}catch(l){
   d="transparent"}"transparent"!==d&&"rgba(0, 0, 0, 0)"!==d&&(c=d);g=a.body;a=a.parentNode}a=/rgb[a]*\((\d+),\s*(\d+),\s*(\d+)/;g=/#([AaBbCcDdEeFf\d]{2})([AaBbCcDdEeFf\d]{2})([AaBbCcDdEeFf\d]{2})/;d=void 0;if(d=b.match(a))var m={
   r:parseInt(d[1],10),g:parseInt(d[2],10),b:parseInt(d[3],10)};else(d=b.match(g))&&(m={
   r:parseInt(d[1],16),g:parseInt(d[2],16),b:parseInt(d[3],16)});
if(c)if(d=void 0,d=c.match(a))var e={
   r:parseInt(d[1],10),g:parseInt(d[2],10),b:parseInt(d[3],10)};else(d=c.match(g))&&(e={
   r:parseInt(d[1],16),g:parseInt(d[2],16),b:parseInt(d[3],16)});else e=m?127<Math.max.apply(null,[m.r,m.g,m.b])?{
   r:0,g:0,b:0}:{
   r:255,g:255,b:255}:{
   r:255,g:255,b:255};d=function(a){
   return"rgb("+[a.r,a.g,a.b].join(", ")+")"};m&&e?(a=Math.max.apply(null,[m.r,m.g,m.b]),m=Math.max.apply(null,[e.r,e.g,e.b]),m=Math.round(m+-.75*(m-a)),m={
   r:m,g:m,b:m}):m?(m=Math.max.apply(null,[m.r,m.g,
m.b]),a=1,127<m&&(a=-1),m=Math.round(m+96*a),m={
   r:m,g:m,b:m}):m={
   r:191,g:191,b:191};return{
   color:b,"background-color":e?d(e):c,"decor-color":d(m)}}function k(a,b){
   this.x=a;this.y=b;this.reverse=function(){
   return new this.constructor(-1*this.x,-1*this.y)};this._length=null;this.getLength=function(){
   this._length||(this._length=Math.sqrt(Math.pow(this.x,2)+Math.pow(this.y,2)));return this._length};var c=function(a){
   return Math.round(a/Math.abs(a))};this.resizeTo=function(a){
   if(0===this.x&&0===this.y)this._length=
0;else if(0===this.x)this._length=a,this.y=a*c(this.y);else if(0===this.y)this._length=a,this.x=a*c(this.x);else{
   var b=Math.abs(this.y/this.x),g=Math.sqrt(Math.pow(a,2)/(1+Math.pow(b,2)));b*=g;this._length=a;this.x=g*c(this.x);this.y=b*c(this.y)}return this};this.angleTo=function(a){
   var b=this.getLength()*a.getLength();return 0===b?0:Math.acos(Math.min(Math.max((this.x*a.x+this.y*a.y)/b,-1),1))/Math.PI}}function h(a,b){
   this.x=a;this.y=b;this.getVectorToCoordinates=function(a,b){
   return new k(a-this.x,
b-this.y)};this.getVectorFromCoordinates=function(a,b){
   return this.getVectorToCoordinates(a,b).reverse()};this.getVectorToPoint=function(a){
   return new k(a.x-this.x,a.y-this.y)};this.getVectorFromPoint=function(a){
   return this.getVectorToPoint(a).reverse()}}function p(a,b,c,g,d){
   this.data=a;this.context=b;if(a.length)for(var m=a.length,e,l,f=0;f<m;f++){
   e=a[f];l=e.x.length;c.call(b,e);for(var t=1;t<l;t++)g.call(b,e,t);d.call(b,e)}this.changed=function(){
   };this.startStrokeFn=c;this.addToStrokeFn=g;this.endStrokeFn=
d;this.inStroke=!1;this._stroke=this._lastPoint=null;this.startStroke=function(a){
   if(a&&"number"==typeof a.x&&"number"==typeof a.y){
   this._stroke={
   x:[a.x],y:[a.y]};this.data.push(this._stroke);this._lastPoint=a;this.inStroke=!0;var b=this._stroke,c=this.startStrokeFn,d=this.context;setTimeout(function(){
   c.call(d,b)},3);return a}return null};this.addToStroke=function(a){
   if(this.inStroke&&"number"===typeof a.x&&"number"===typeof a.y&&4<Math.abs(a.x-this._lastPoint.x)+Math.abs(a.y-this._lastPoint.y)){
   var b=
this._stroke.x.length;this._stroke.x.push(a.x);this._stroke.y.push(a.y);this._lastPoint=a;var c=this._stroke,d=this.addToStrokeFn,g=this.context;setTimeout(function(){
   d.call(g,c,b)},3);return a}return null};this.endStroke=function(){
   var a=this.inStroke;this.inStroke=!1;this._lastPoint=null;if(a){
   var b=this._stroke,c=this.endStrokeFn,d=this.context,g=this.changed;setTimeout(function(){
   c.call(d,b);g.call(d)},3);return!0}return null}}function n(a,b,c,g){
   if("ratio"===b||"%"===b.split("")[b.length-1]