signature_pad实现手机端电子签名

• 参考博客地址：https://blog.csdn.net/weixin_38362455/article/details/88171200
  官方地址：https://www.jsdelivr.com/package/npm/signature_pad

首先大概的效果图：

image.png

实现步骤：

①：引用js
引用在线地址：

也可以下载到本地引用

②: html部分。我这里是一个弹出的签名

    

    

        <#--关闭图标-->
        

        <#--签名-->
        

            

                

                    专家签名
                
                

                    
                    
                    
                    
                    
                
                

                    重签
                    确定
                
            
        
        <#--签名 end-->

    

③: 加入样式，当然样式可以自定义咯

.signature-pad,.signature-pad--body{height:90%}
.signature-pad{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;padding:16px;width:100%;height:100%;max-height:300px;background:#fff;font-size:10px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.signature-pad--body{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1}
.signature-pad--body canvas{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;box-shadow:0 0 5px rgba(0,0,0,.02) inset}
.signature-pad--footer{color:#c3c3c3;text-align:center;font-size:1.2em}
.signature-pad--actions{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:8px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}

④ 划重点咯JS部分

    var $iosActionsheet = $('#iosActionsheet');
    var $iosMask = $('#iosMask');
    function hideActionSheet() {
        $iosActionsheet.removeClass('weui-actionsheet_toggle');
        $iosMask.fadeOut(200);
    }
   // ..... 这里省略了弹出框的控制显示隐藏代码..........

    //签名部分
    var canvas = document.getElementById('signature-canvas');
    var signaturePad = new SignaturePad(canvas, { backgroundColor: 'rgba(255, 255, 255, 0)', penColor: 'rgb(0, 0, 0)' });
    var cancelButton = document.getElementById('clear');
    cancelButton.addEventListener('click', function (event) {
        signaturePad.clear();
    });
    //阻止键盘弹出 不写这个有的安卓手机上会弹出软键盘
    $("#signature-canvas").focus(function(){
        document.activeElement.blur();
    });
    //比如 第一次canvas所在div是隐藏 再次调出来要调用这个方法 不然会导致canvas不能绘制内容
    function resizeCanvas() {
        var ratio = Math.max(window.devicePixelRatio || 1, 1); // 清除画布
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
        signaturePad.clear();
    }
    window.onresize = resizeCanvas;
    resizeCanvas();

补充2020-0308

//除了用base64提交签名还可以利用formData提交，blob 即为文件内容
let markSrc = (signaturePad.toDataURL('image/png'));
var blob = dataURItoBlob(markSrc);
function dataURLtoBlob(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});
}