<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jSignature/2.1.3/jSignature.min.js"></script>
</head>
<body>
<div class="container">
<label style="display:inline-block;margin-bottom: 5px;">签名：</label>
<div id="canvas">
</div>
<input id="saveBtn" type="button" value="完成">
<input id="clearBtn" type="button" value="清除">
</div>
<script>
// 初始化
var param = {
"width": "100%", // 签名区域宽度
"height": "300px", // 签名区域高度
"lineWidth": "1",
};
$("#canvas").jSignature(param);
$("#clearBtn").click(function () {
$("#canvas").jSignature("reset");
});
$("#saveBtn").click(function () {
let $signDiv = $("canvas");
let len = $signDiv.jSignature("getData", "native").length;
if (len === 0) {
alert("请签名后提交");
return;
}
let data = $signDiv.jSignature("getData");
let ok = confirm("是否上传?");
if (ok === false) return;
console.log(data);
});
</script>
</body>
</html>
在控制台复制base64编码的图片，找个在线的base64转图片查看效果
