signature_pad与电子印章：结合使用的实现方案
项目地址: https://gitcode.com/gh_mirrors/si/signature_pad 引言
在数字化办公和在线签约场景中，电子签名（Electronic Signature）和电子印章（Electronic Seal）是确保文档合法性和完整性的关键技术。电子签名主要用于个人身份确认，而电子印章则更多应用于企业或组织的官方文件认证。本文将介绍如何将signature_pad（一个基于HTML5 Canvas的平滑签名绘制库）与电子印章功能结合，实现一套完整的电子签章解决方案。
技术背景
signature_pad简介
signature_pad是一个轻量级的JavaScript库，它利用HTML5 Canvas API实现了平滑的签名绘制功能。其核心特性包括：
- 支持鼠标、触摸和指针设备输入
- 基于贝塞尔曲线（Bézier Curve）的平滑线条绘制
- 可调整笔迹颜色、粗细和背景色
- 支持多种格式导出（PNG、JPG、SVG）
- 轻量级设计，无外部依赖
电子印章的核心需求
电子印章系统通常需要满足以下需求：
- 印章图像的加载与显示
- 印章位置的精确调整
- 印章与签名的关联存储
- 防止篡改的安全机制
- 符合电子签名法的合规要求
实现方案
系统架构设计
以下是signature_pad与电子印章结合使用的系统架构：
开发环境准备
# 克隆项目仓库
git clone https://gitcode.com/gh_mirrors/si/signature_pad
# 进入项目目录
cd signature_pad
# 安装依赖
npm install
# 启动开发服务器
npm run dev
核心实现步骤
1. 基础签名功能实现
首先，我们需要初始化signature_pad并实现基础的签名功能：
<div class="signature-container">
<canvas id="signatureCanvas"></canvas>
<div class="controls">
<button id="clearBtn">清除</button>
<button id="saveSignatureBtn">保存签名</button>
<button id="loadSealBtn">添加印章</button>
</div>
</div>
<script src="js/signature_pad.umd.min.js"></script>
<script>
// 初始化SignaturePad
const canvas = document.getElementById('signatureCanvas');
const signaturePad = new SignaturePad(canvas, {
minWidth: 1,
maxWidth: 3,
penColor: '#000000',
backgroundColor: '#ffffff',
velocityFilterWeight: 0.7
});
// 调整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.redraw();
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// 绑定控制按钮事件
document.getElementById('clearBtn').addEventListener('click', () => {
signaturePad.clear();
});
document.getElementById('saveSignatureBtn').addEventListener('click', () => {
if (signaturePad.isEmpty()) {
alert('请先签名');
return;
}
const signatureData = signaturePad.toDataURL('image/png');
// 保存签名数据
localStorage.setItem('signatureData', signatureData);
alert('签名已保存');
});
</script>
2. 电子印章功能集成
接下来，我们添加电子印章功能，包括印章选择、位置调整和与签名的合成：
// 电子印章管理模块
class ElectronicSealManager {
constructor(canvas, signaturePad) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.signaturePad = signaturePad;
this.sealImage = null;
this.sealPosition = { x: 0, y: 0 };
this.isDragging = false;
this.sealSize = 100;
this._bindEvents();
}
// 加载印章图像
loadSeal(imageUrl) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
this.sealImage = img;
this._drawSeal();
resolve();
};
img.onerror = reject;
img.src = imageUrl;
});
}
// 绘制印章
_drawSeal() {
if (!this.sealImage) return;
// 先保存当前签名
const signatureData = this.signaturePad.toData();
// 清除画布并重新绘制签名
this.signaturePad.clear();
this.signaturePad.fromData(signatureData);
// 绘制印章
this.ctx.save();
this.ctx.globalAlpha = 0.7; // 稍微透明，便于查看下方内容
this.ctx.drawImage(
this.sealImage,
this.sealPosition.x,
this.sealPosition.y,
this.sealSize,
this.sealSize
);
this.ctx.restore();
}
// 设置印章位置
setPosition(x, y) {
this.sealPosition = { x, y };
this._drawSeal();
}
// 调整印章大小
setSize(size) {
this.sealSize = size;
this._drawSeal();
}
// 绑定事件处理
_bindEvents() {
this.canvas.addEventListener('click', (e) => {
if (!this.sealImage) return;
const rect = this.canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// 检查是否点击了印章
if (this._isPointInSeal(x, y)) {
this.isDragging = true;
} else {
// 在空白处点击，放置印章
this.setPosition(x - this.sealSize / 2, y - this.sealSize / 2);
}
});
this.canvas.addEventListener('mousemove', (e) => {
if (!this.isDragging || !this.sealImage) return;
const rect = this.canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
this.setPosition(x - this.sealSize / 2, y - this.sealSize / 2);
});
this.canvas.addEventListener('mouseup', () => {
this.isDragging = false;
});
this.canvas.addEventListener('mouseleave', () => {
this.isDragging = false;
});
}
// 检查点是否在印章范围内
_isPointInSeal(x, y) {
return (
x >= this.sealPosition.x &&
x <= this.sealPosition.x + this.sealSize &&
y >= this.sealPosition.y &&
y <= this.sealPosition.y + this.sealSize
);
}
// 合并签名和印章为最终图像
getCombinedImage() {
return this.canvas.toDataURL('image/png');
}
}
// 初始化电子印章管理器
const sealManager = new ElectronicSealManager(canvas, signaturePad);
// 绑定印章加载按钮事件
document.getElementById('loadSealBtn').addEventListener('click', async () => {
try {
// 这里可以替换为实际的印章图像URL或文件选择器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
