Signature Pad with Watermark

此功能完全由AI生成
一个支持水印功能的手写签名板库，允许用户进行电子签名，并可显示自定义水印文字（不包含在最终输出中）。

功能特性

- 手写签名功能，支持鼠标和触摸设备
- 可自定义水印文字（可选）
- 支持导出为图片（PNG）和SVG格式
- 水印文字不会出现在导出结果中
- 响应式设计，适配不同设备

安装

``bash
npm install signature-pad-watermark
`

使用方法

$3

`html

Clear
Save as Image
Save as SVG

`

$3

`javascript
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

$3

new SignaturePad(container, options)

- container: DOM元素或选择器，用于放置签名板
- options: 配置选项对象

$3

- watermarkText: 水印文字（默认: ''）
- watermarkColor: 水印颜色（默认: 'rgba(200, 200, 200, 0.3)'）
- watermarkFontSize: 水印字体大小（默认: '24px'）
- watermarkFontFamily: 水印字体（默认: 'Arial'）
- penColor: 签名笔颜色（默认: 'black'）
- penSize: 签名笔粗细（默认: 2）
- backgroundColor: 背景颜色（默认: 'white'）

$3

- clear(): 清除签名
- toDataURL(type, quality): 导出为图片数据URL（不含水印）
- toSVG(): 导出为SVG数据URL（不含水印）
- isEmpty(): 检查是否为空签名
- setWatermarkText(text): 动态设置水印文字
- destroy()`: 销毁签名板实例

浏览器支持

现代浏览器，包括：

- Chrome
- Firefox
- Safari
- Edge

许可证

MIT