html5实现手写签名板，用于电子文档签名,jQuery signature插件实现(新)
以下是使用HTML5和jQuery实现的简单电子文档电子签名的示例代码。这个示例使用了jQuery Signature Plugin来获取用户的签名。
首先，确保在HTML文件中包含了jQuery库和jQuery Signature Plugin：
<!DOCTYPE html>
<html lang="en">
<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/jquery-signature/2.3.3/jquery.signature.min.js"></script>
<style>
#signature-pad {
width: 400px;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="signature-pad"></div>
<button id="clear">清除</button>
<button id="save">保存</button>
<script>
$(document).ready(function() {
$('#signature-pad').signature({syncCursor: true});
$('#clear').click(function(e) {
$('#signature-pad').signature('clear');
});
$('#save').click(function(e) {
var data = $('#signature-pad').signature('getData');
console.log(data);
// 这里可以将签名数据发送到服务器进行保存或其他操作
});
});
</script>
</body>
</html>这段代码中，我们定义了一个#signature-pad的DIV来作为签名板，并提供了清除（#clear）和保存（#save）签名的按钮。当用户在#signature-pad中签名后，可以点击#save按钮将签名数据保存起来。
请注意，实际应用中你可能需要将签名数据转换为图片格式，并且可能需要后端支持来处理和存储这些数据。
评论已关闭