3分钟上手电子签名：signature_pad实现签名图片水印与注释全流程
项目地址: https://gitcode.com/gh_mirrors/si/signature_pad 在数字化办公的今天，你是否还在为合同签署、文件确认等场景中的手写签名数字化而烦恼？传统方式要么依赖专业软件，要么操作复杂难以普及。本文将带你使用signature_pad这个轻量级JavaScript库，快速实现从电子签名到添加水印、注释的完整流程，让你告别繁琐的编辑工作。
认识signature_pad
signature_pad是一个基于HTML5 canvas的轻量级签名绘制库，它使用贝塞尔曲线插值技术实现流畅的签名效果，支持现代桌面和移动浏览器，且不依赖任何外部库。项目核心代码位于src/signature_pad.ts，通过Canvas API实现笔迹的平滑绘制。
该库的主要特点包括：
- 支持多种图片格式导出（PNG、JPG、SVG）
- 可自定义笔迹颜色、宽度、背景色等样式
- 提供丰富的事件监听机制
- 支持高DPI屏幕自适应
快速开始：基础签名功能实现
环境准备
首先，通过GitCode获取项目代码：
git clone https://gitcode.com/gh_mirrors/si/signature_pad.git
cd signature_pad
安装依赖并构建项目：
npm install
npm run build
基础HTML结构
创建一个简单的HTML页面，引入必要的CSS和JS文件。项目中已提供完整的示例页面docs/index.html，核心结构如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Signature Pad demo</title>
<link rel="stylesheet" href="css/signature-pad.css">
</head>
<body>
<div id="signature-pad" class="signature-pad">
<div class="signature-pad--body">
<canvas></canvas>
</div>
<div class="signature-pad--footer">
<div class="signature-pad--actions">
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button save" data-action="save-png">Save as PNG</button>
</div>
</div>
</div>
<script src="js/signature_pad.umd.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
初始化签名面板
在JavaScript中初始化SignaturePad实例，代码位于docs/js/app.js：
const canvas = document.querySelector("canvas");
const signaturePad = new SignaturePad(canvas, {
minWidth: 1,
maxWidth: 3,
penColor: "rgb(0, 0, 0)",
backgroundColor: "rgb(255, 255, 255)"
});
// 处理窗口大小变化，确保在高DPI屏幕上显示正常
function resizeCanvas() {
const ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
signaturePad.clear();
}
window.addEventListener("resize", resizeCanvas);
resizeCanvas();
核心功能解析
签名绘制原理
signature_pad通过监听鼠标或触摸事件，记录笔迹的坐标点，然后使用贝塞尔曲线连接这些点，实现平滑的线条效果。核心算法位于src/bezier.ts，通过计算控制点来实现曲线的平滑过渡。
主要API介绍
signature_pad提供了丰富的API用于签名的创建、修改和导出：
// 导出为DataURL
signaturePad.toDataURL(); // 默认PNG格式
signaturePad.toDataURL("image/jpeg", 0.9); // JPG格式，质量0.9
signaturePad.toSVG(); // SVG格式
// 清除签名
signaturePad.clear();
// 判断是否为空
signaturePad.isEmpty();
// 从数据恢复签名
const data = signaturePad.toData(); // 获取点集数据
signaturePad.fromData(data); // 恢复签名
完整API文档可参考README.md中的API部分。
高级应用：签名图片水印与注释
添加文字水印
在签名图片上添加水印可以通过Canvas API实现，以下是一个简单的实现示例：
function addWatermark() {
const ctx = canvas.getContext("2d");
ctx.save();
// 设置水印样式
ctx.font = "20px Arial";
ctx.fillStyle = "rgba(128, 128, 128, 0.5)";
ctx.textAlign = "center";
// 添加水印文字
ctx.fillText("内部文件", canvas.width / 2, canvas.height / 2);
ctx.restore();
}
// 在保存前添加水印
document.querySelector('[data-action="save-png"]').addEventListener('click', function() {
if (signaturePad.isEmpty()) {
return alert("请先签名");
}
// 添加水印
addWatermark();
// 导出图片
const dataURL = signaturePad.toDataURL();
download(dataURL, "signature.png");
});
添加图形注释
除了文字水印，我们还可以添加图形注释，如箭头、矩形等：
function drawArrow(x1, y1, x2, y2) {
const ctx = canvas.getContext("2d");
const headLength = 10;
const angle = Math.atan2(y2 - y1, x2 - x1);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = "red";
ctx.lineWidth = 2;
ctx.stroke();
// 绘制箭头头部
ctx.beginPath();
ctx.moveTo(x2, y2);
ctx.lineTo(x2 - headLength * Math.cos(angle - Math.PI / 6), y2 - headLength * Math.sin(angle - Math.PI / 6));
ctx.moveTo(x2, y2);
ctx.lineTo(x2 - headLength * Math.cos(angle + Math.PI / 6), y2 - headLength * Math.sin(angle + Math.PI / 6));
ctx.stroke();
}
// 示例：在签名下方添加日期
function addDateAnnotation() {
const ctx = canvas.getContext("2d");
ctx.save();
ctx.font = "14px Arial";
ctx.fillStyle = "black";
ctx.textAlign = "right";
const date = new Date().toLocaleDateString();
ctx.fillText(`签署日期: ${date}`, canvas.width - 20, canvas.height - 10);
ctx.restore();
}
完整工作流程
结合上述功能，我们可以实现一个完整的签名-水印-导出工作流程：
- 用户在签名面板上完成签名
- 添加水印和注释
- 导出为所需格式的图片文件
- 保存或上传图片
实际应用场景与优化建议
移动端适配
为确保在移动设备上有良好的体验，需要特别处理触摸事件和屏幕旋转。项目中提供了高DPI屏幕适配的示例代码docs/js/app.js，核心是根据devicePixelRatio调整Canvas大小：
function resizeCanvas() {
const ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
signaturePad.clear();
}
window.addEventListener("resize", resizeCanvas);
window.addEventListener("orientationchange", resizeCanvas);
resizeCanvas();
性能优化
对于复杂的签名或频繁的操作，可以考虑以下优化措施：
- 使用requestAnimationFrame优化绘制性能
- 实现签名数据的本地存储，防止意外丢失
- 对导出的图片进行压缩处理，减小文件体积
总结与展望
通过本文的介绍，你已经掌握了使用signature_pad实现基础签名、添加水印和注释的方法。这个轻量级库虽然简单，但功能强大，可广泛应用于电子合同、表单签署、签收确认等场景。
项目目前仍在持续维护中，未来可能会添加更多高级功能，如多图层支持、更丰富的注释工具等。你可以通过ISSUE_TEMPLATE.md提交功能建议或bug报告，为项目贡献力量。
希望本文能帮助你在实际项目中快速实现专业的电子签名功能。如果你觉得这个项目有用，请给它一个星标支持！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
