jquery实现手写签名，引入插件之后，自己稍微处理一下。下面代码实现了清空签名，导出图片，点击提交图片格式是base64的。
使用的插件名称官网地址：jSignature
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>签名页面</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jSignature/2.1.3/jSignature.min.js"></script>
<style>
#signature {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="signature"></div>
<button id="clearBtn">清空</button>
<button id="exportBtn">导出图片</button>
<button id="submitBtn">提交</button>
<script>
$(function () {
var $signature = $("#signature");
$signature.jSignature();
// var $signature = $("#signature").jSignature();
// 清空
$("#clearBtn").click(function () {
$signature.jSignature("reset");
});
// 保存图片
$("#exportBtn").click(function () {
var dataUrl = $signature.jSignature("getData");
var link = document.createElement("a");// 创建一个虚拟链接
link.href = dataUrl;
link.download = "signature.png"; // 设置下载的文件名，可以根据需要进行修改
link.click();// 执行点击事件触发下载
});
// 提交按钮
$("#submitBtn").click(function () {
var dataUrl = $signature.jSignature("getData");
console.log(dataUrl);
// 发送数据
// $.ajax({
// url: "/",
// method: "POST",
// data: {
// image: dataUrl
// },
// success: function (response) {
// console.log(response);
// },
// error: function (error) {
// console.log(error);
// }
// });
});
});
</script>
</body>
</html>