signature_pad实现手机端电子签名

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

首先大概的效果图：

image.png

实现步骤：

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/example/css/signature-pad.css">

也可以下载到本地引用 <script src = "html/js/signature_pad.min.js"></script>

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

<div>
    <div class="weui-mask" id="iosMask" style="display: none;opacity: 1;visibility: visible"></div>
    <div class="weui-actionsheet" id="iosActionsheet" style="background: #fff;">
        <#--关闭图标-->
        <img class="close-icon" id="iosActionsheetCancel" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAACMUlEQVRIS71W0VHjMBB9qxRA0gF0kA5Iss73QQUXKiBXAaGCcyoIHRC+Y098HdDB0QFQgLXMeqSMotiOYSD68oylfdr3nnaX0GFtNpuRMeZSRIYA+u7IGxE9E1ExmUz+HQtDTRu2223fWnsLYO6Ca7Ai2j8CcAngDUBqjFmOx2P9Pli1QHmezwD8BfAOYGGMWTcFcBe60n0AzgD8YeaHGOkAKM9zPXDnDqTHKAn/53mu2esFF8x8H/7bA1IQEZmLyNV0Oo1p6oSpehLRmohSZtZLV2sH5OhaWWvHXwXxQZ15tgBuPI0VkOP5P4B7Zv4UXU1pOhrvjDEXqm8F5HSZMfN5eDDLMrXwvE7cSBs1z4qZYyleADwohdWPpoCezpCCOIO2Pd69zDwgz6cxZlBn4Q6BVk0XcZK8qu7kaBsxsz6+2lUH1iVbJ4u6t6Asy9SKz6EV69DCwO5/YyaRfvpkhppRhXgMyN2uEt0F2lm37YF5xk4HdErqtEz8vBlOZu+ffrAikiZJ0g9L0G9mvoisKW1Vwe9V6/uA0fn9EqQvuCzLFyLSPvJtRVVEFr1e73xXVMM38p1tQkSukyRZ7/WjoIrfWmuvv9qTnLkeASxrG1/Ad9XKtdMmSbJse/U1ldy3cu1ru+56kFEsLhG9Op6f2oaTsix/qb4iMgAw83SFFzk2bun8MCeiMxEpdIYLD4uIzgcjEXnXGcEYk35q3IopcbxrwCERVQOkiFQDpLW26KLnB+7zszC1Wdm4AAAAAElFTkSuQmCC"/>

        <#--签名-->
        <div class="sign-wrap" id="sign-edit" style="padding-bottom: 70px;">
            <div id="signature-pad" class="signature-pad">
                <div class="description">
                    <span>专家签名</span>
                </div>
                <div class="signature-pad--body">
                    <canvas id="signature-canvas"></canvas>
                    <i class="leftup lefta"></i>
                    <i class="leftup rightup"></i>
                    <i class="leftup leftdown"></i>
                    <i class="leftup rightdown"></i>
                </div>
                <div class="signature-pad--footer layui-layer-btn">
                    <button type="button" class="layui-layer-btn0 buttonclear " id="clear" data-action="clear">重签</button>
                    <button type="button" class="layui-layer-btn1 buttonclear " id="save" data-action="clear">确定</button>
                </div>
            </div>
        </div>
        <#--签名 end-->

    </div>
</div>

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

.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});
}