在线签名-保存签名图片-清空签名-电脑端移动端都适合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<script type="text/javascript" src="https://www.francelecheng.com//static/index/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<canvas id="signature-pad" width="400" height="350" style="border: 1px solid #ddd;"></canvas>
<div id="clear">清空画布</div>
<div id="getSignature">保存图片</div>
<div class="box"></div>
<script>
var canvas = document.getElementById('signature-pad');
this.canvas = document.getElementById('signature-pad');
var signaturePad = new SignaturePad(canvas);
// 清除签名
document.getElementById('clear').addEventListener('click', function () {
signaturePad.clear();
});
// 获取签名图片的Base64编码
document.getElementById('getSignature').addEventListener('click', function () {
var data = signaturePad.toDataURL('image/png');
console.log(data); // 可以将data发送到服务器端保存或用于其他用途
$(".box").html("<img src='" + data + "'>")
});
</script>
</body>
</html>
