signature-pad-watermark
v1.0.2
Published
A signature pad with watermark support for user signatures
Maintainers
chaocodesReadme
本库即将删除，请迁移至npm i signature-pad-watermark 下载稳定版本
Signature Pad with Watermark
此功能完全由AI生成 一个支持水印功能的手写签名板库，允许用户进行电子签名，并可显示自定义水印文字（不包含在最终输出中）。
功能特性
- 手写签名功能，支持鼠标和触摸设备
- 可自定义水印文字（可选）
- 支持导出为图片（PNG）和SVG格式
- 水印文字不会出现在导出结果中
- 响应式设计，适配不同设备
安装
npm install signature-pad-watermark使用方法
基本用法
<!DOCTYPE html>
<html>
<head>
<title>Signature Pad Demo</title>
</head>
<body>
<div id="signature-pad" style="width: 100%; height: 300px;"></div>
<div>
<button onclick="clearPad()">Clear</button>
<button onclick="saveImage()">Save as Image</button>
<button onclick="saveSVG()">Save as SVG</button>
</div>
<script src="node_modules/signature-pad-watermark/dist/signature-pad-watermark.js"></script>
<script>
// 初始化签名板
const signaturePad = new SignaturePadWatermark.default(
document.getElementById('signature-pad'),
{
watermarkText: '请在此处签名',
watermarkColor: 'rgba(200, 200, 200, 0.5)',
penColor: 'black',
penSize: 2
}
);
function clearPad() {
signaturePad.clear();
}
function saveImage() {
const dataUrl = signaturePad.toDataURL();
// 处理图片数据
console.log(dataUrl);
}
function saveSVG() {
const svgUrl = signaturePad.toSVG();
// 处理SVG数据
console.log(svgUrl);
}
</script>
</body>
</html>高级用法（ES6模块）
import SignaturePad from 'signature-pad-watermark';
const signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
watermarkText: '机密文件，请谨慎签署', // 水印文字，不传则不显示
watermarkColor: 'rgba(255, 0, 0, 0.3)', // 水印颜色
watermarkFontSize: '24px', // 水印字体大小
watermarkFontFamily: 'Arial', // 水印字体
penColor: '#FF0000', // 签名颜色
penSize: 3, // 签名粗细
backgroundColor: 'white' // 背景颜色
});
// 清除签名
signaturePad.clear();
// 导出为图片
const imageData = signaturePad.toDataURL('image/png', 0.92);
// 导出为SVG
const svgData = signaturePad.toSVG();
// 检查是否有签名
const isEmpty = signaturePad.isEmpty();
// 动态更新水印文字
signaturePad.setWatermarkText('新水印文字');API
构造函数
new SignaturePad(container, options)
container: DOM元素或选择器，用于放置签名板options: 配置选项对象
配置选项
watermarkText: 水印文字（默认: ''）watermarkColor: 水印颜色（默认: 'rgba(200, 200, 200, 0.3)'）watermarkFontSize: 水印字体大小（默认: '24px'）watermarkFontFamily: 水印字体（默认: 'Arial'）penColor: 签名笔颜色（默认: 'black'）penSize: 签名笔粗细（默认: 2）backgroundColor: 背景颜色（默认: 'white'）
方法
clear(): 清除签名toDataURL(type, quality): 导出为图片数据URL（不含水印）toSVG(): 导出为SVG数据URL（不含水印）isEmpty(): 检查是否为空签名setWatermarkText(text): 动态设置水印文字destroy(): 销毁签名板实例
浏览器支持
现代浏览器，包括：
- Chrome
- Firefox
- Safari
- Edge
许可证
MIT