前言
实现网页中的手写签名功能通常用于法律文档、收据、合同等需要验证的场景。要在网页中集成手写签名，可以使用js库，例如：Signature Pad,这是一个非常流行的手写签名库，可以是用户在画布上使用鼠标、触摸屏进行签名。
1.引入Signature Pad库
可以通过cdn引入或者直接下载下来之后本地引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手写电子签名</title>
</head>
<!-- <script src="./signature_pad.umd.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/signature_pad@5.0.2/dist/signature_pad.umd.min.js"></script>
2.设置html结构
<canvas id="signature" width="300px" height="200px" style="border: 1px solid #ccc;"></canvas>
3.初始化签名版和相关配置
const canvas = document.getElementById('signature');
// 确保画布的显示尺寸和实际像素尺寸一致
function resizeCanvas() {
let ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext('2d').scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
// 初始化签名板：
const signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgba(255, 255, 255, 0)',
penColor: 'rgba(0, 0, 0)'
})
4.完善其他功能
为了便于效果查看，我们增加保存签名并声称效果展示的功能 、清除签名的功能：
<body>
<button id="clear">清除签名</button>
<button id="save">保存签名</button>
<canvas id="signature" width="300px" height="200px" style="border: 1px solid #ccc;"></canvas>
<h3>签名成功之后保存，会展示保存的签名图片</h3>
<img id="image" src="" alt="">
</body>
document.getElementById("save").addEventListener('click', () => {
if(signaturePad.isEmpty()) {
alert('请先签名之后再保存')
} else {
const dataUrl = signaturePad.toDataURL();
console.log(dataUrl);
document.getElementById('image').setAttribute('src', dataUrl);
}
})
document.getElementById('clear').addEventListener('click', () => {
signaturePad.clear();
})
5.完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手写电子签名</title>
</head>
<!-- <script src="./signature_pad.umd.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/signature_pad@5.0.2/dist/signature_pad.umd.min.js"></script>
<body>
<button id="clear">清除签名</button>
<button id="save">保存签名</button>
<canvas id="signature" width="300px" height="200px" style="border: 1px solid #ccc;"></canvas>
<h3>签名成功之后保存，会展示保存的签名图片</h3>
<img id="image" src="" alt="">
</body>
<script>
const canvas = document.getElementById('signature');
// 确保画布的显示尺寸和实际像素尺寸一致
function resizeCanvas() {
let ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext('2d').scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
// 初始化签名板：
const signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgba(255, 255, 255, 0)',
penColor: 'rgba(0, 0, 0)'
})
document.getElementById("save").addEventListener('click', () => {
if(signaturePad.isEmpty()) {
alert('请先签名之后再保存')
} else {
const dataUrl = signaturePad.toDataURL();
console.log(dataUrl);
document.getElementById('image').setAttribute('src', dataUrl);
}
})
document.getElementById('clear').addEventListener('click', () => {
signaturePad.clear();
})
</script>
</html>
