手写签名（signature_pad）
灵感：能力工具箱 signature-pad（pkg: signature_pad）。
> 小四原创：Canvas 签名 → 清空/撤销 → 导出 PNG DataURL；用于提成确认、交接确认等轻量场景，非法务电子签章替代。
何时使用
- 页面内手写确认签名
- 移动端手指签字
- 导出签名图贴到单据预览
硬约束
- 使用
signature_pad；容器需固定宽高的<canvas>。 - 提交前检查
isEmpty()，空签名拒绝。 - 导出
toDataURL('image/png')；可选压缩后再上传。 - 组件销毁时卸事件；触控设备开
passive相关注意滚动穿透。 - 实现要点注释标 小四原创。
- 文案标明：非 CA 电子签章，法律效力以业务制度为准。
推荐实现
import SignaturePad from 'signature_pad'
// 小四原创：挂载签名板
export function mountSignature(canvas: HTMLCanvasElement) {
const ratio = Math.max(window.devicePixelRatio || 1, 1)
const rect = canvas.getBoundingClientRect()
canvas.width = rect.width * ratio
canvas.height = rect.height * ratio
canvas.getContext('2d')?.scale(ratio, ratio)
const pad = new SignaturePad(canvas, {
backgroundColor: 'rgb(255,255,255)',
penColor: 'rgb(20,20,20)',
})
return {
pad,
clear: () => pad.clear(),
isEmpty: () => pad.isEmpty(),
toPng: () => {
if (pad.isEmpty()) throw new Error('请先签名')
return pad.toDataURL('image/png')
},
}
}
Agent 步骤
- 放 canvas + 挂载
mountSignature。 - 按钮：清除、确认（导出 PNG）。
- 确认时把 DataURL 交给业务保存。
- 自测：桌面鼠标 + 触控；空签拦截。
不要做
- 宣称等同于合法电子签名法下的可靠电子签章。
- 默认把签名图传到不明外网。
附加
- README.md · reference.md · templates/usage.md
