JavaScript

1、html结构

<div class="canvas-box">
     <label>签名</label>
     <canvas id="signature-pad"></canvas>
     <a class="mt-2" id="btn_clear" href="javascript:;">Clear</a>
</div>

2、js结构（初始化）

$(document).ready(function() {
    var canvas = document.getElementById('signature-pad');
    canvas.width = 445;//书写区域的宽度
    canvas.height = 120;//书写区域的高度
    var signaturePad = new SignaturePad(canvas);
});

3、清除签名区域

$('#btn_clear').click(function () {
     signaturePad.clear();
});

4、判断签名是否书写

if (signaturePad.isEmpty()) {
   console.log('请先签名');
} else {
   var imageDataURL = signaturePad.toDataURL();
   // ... 上传逻辑
}

5、signature_pad.umd.js下载

CDN 引入： https://unpkg.com/signature_pad 

本站下载： signature_pad.umd.js.zip

需要引入jQuery，本文使用jQuery v3.6.4版本。