---

🎮 在线体验

无需安装，直接在浏览器中体验 Vue3 Signature：

👉 GitHub Pages 在线演示 - 在浏览器中试用所有功能！

> 演示展示了组件的所有功能，包括绘制、保存、撤销、水印等。

$3

想要部署自己的演示吗？查看我们的部署指南了解如何部署到 GitHub Pages 的详细说明。

$3

在线演示现在支持导入图片功能：
- 📁 上传本地图片文件
- 🔗 从URL加载图片
- 🖼️ 一键尝试示例图片

非常适合编辑现有签名、添加标注或使用模板！

✨ 特性

$3

基于 signature_pad 构建 - 这是由 Szymon Nowak 开发的行业标准 HTML5 Canvas 平滑签名绘制库，拥有 13k+ GitHub 星标，可靠性经过验证。

$3

- 📱 触摸和鼠标支持 - 在移动设备和桌面设备上无缝工作
- 🎨 可自定义 - 完全可定制的画笔颜色、背景和签名样式
- 💾 多种导出格式 - 导出签名为 PNG、JPEG 或 SVG 格式
- 🔄 撤销支持 - 简单的撤销功能，提供更好的用户体验
- 🖼️ 水印支持 - 为签名添加自定义水印
- 🚫 禁用模式 - 在可编辑和只读状态之间切换
- 📐 响应式 - 自动适应容器大小
- 🎯 TypeScript 支持 - 包含完整的 TypeScript 类型定义
- ⚡ 轻量级 - 小巧的包体积，无不必要的依赖
- 🌍 跨平台 - 适用于所有现代浏览器和移动设备

!演示

🚀 快速开始

$3

``bash


使用 npm

`javascript
// main.js
import { createApp } from "vue";
import Vue3Signature from "vue3-signature";
import App from "./App.vue";

createApp(App).use(Vue3Signature).mount("#app");
`

步骤 2： 在组件中使用

`vue



`

📖 文档

$3

| 属性 | 类型 | 默认值 | 描述 |
| --------------- | --------- | ----------------------------------------------------------------- | ------------------------------------- |
| sigOption | Object | {penColor: "rgb(0, 0, 0)", backgroundColor: "rgb(255,255,255)"} | 签名板选项，包括画笔颜色和背景颜色 |
| w | String | "100%" | 签名板宽度（例如 "100%"、"500px"）|
| h | String | "100%" | 签名板高度（例如 "100%"、"300px"）|
| clearOnResize | Boolean | false | 窗口调整大小时是否清空画布 |
| waterMark | Object | {} | 水印配置（参见水印选项）|
| disabled | Boolean | false | 禁用/启用签名输入 |
| defaultUrl | String | "" | 要在画布上显示的默认图像 URL |

> 💡 sigOption 支持 signature_pad 提供的全部参数。组件会深度监听该对象，自动重建签名板并尽量保留当前笔画。

$3

通过组件 ref 可以访问 signature_pad 的所有公开 API：

| 方法 | 参数 | 返回值 | 描述 |
| --------------------------------- | ------------------------------------------------------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------ |
| save(format?, encoderOptions?) | 同 toDataURL | string | toDataURL 的兼容别名，方便旧版本升级。 |
| toDataURL(format?, encoderOptions?) | 与 signature_pad#toDataURL 完全一致 | string | 按 PNG/JPEG/SVG 导出签名，支持传入编码参数。 |
| toSVG(options?) | options?: ToSVGOptions | string | 输出 SVG 字符串，可选包含背景色或 fromDataURL 导入的图片。 |
| clear() | - | void | 使用当前背景色清空画布。 |
| redraw() | - | void | 重新渲染当前保存的笔画/导入的图片。 |
| isEmpty() | - | boolean | 判断画布是否为空。 |
| undo(steps = 1) | steps?: number | void | 撤销最近的若干笔画。 |
| toData() | - | PointGroup[] | 获取 signature_pad 的原始笔画数据。 |
| fromData(pointGroups, options?) | pointGroups: PointGroup[], options?: FromDataOptions | void | 根据原始笔画数据绘制，可控制是否清空画布。 |
| fromDataURL(url, options?) | url: string, options?: FromDataUrlOptions | Promise | 与 signature_pad#fromDataURL 完全一致的导入能力。 |
| addWaterMark(options) | options: WaterMarkOption | void | 便捷水印工具，保留原有功能。 |
| trim(options?) | options?: TrimOptions | TrimResult \| null | 克隆画布、裁剪留白并返回离屏结果，不会影响用户看到的内容。 |
| toTrimmedDataURL(format?, encoderOptions?) | format?: string, encoderOptions?: number | string | 仅返回裁剪后的 data URL，内部复用 trim。 |
| enable() / disable() | - | void | 直接调用底层的 on()/off()，用于切换编辑状态。 |
| addEventListener(...) | 与 EventTarget#addEventListener 相同 | void | 绑定 signature_pad 的底层事件。 |
| removeEventListener(...) | 与 EventTarget#removeEventListener 相同 | void | 移除事件监听。 |
| getInstance() | - | SignaturePad? | 获取底层 SignaturePad 实例，方便直接访问所有属性/方法。 |

$3

| 事件 | 载荷 | 说明 |
| ------------------- | ----------------- | ------------------------------------------------ |
| ready | SignaturePad | 组件初始化完成并调整完大小后触发。 |
| begin / end | void | 兼容旧版本的 onBegin / onEnd。 |
| beginStroke | SignatureEvent | 笔画开始前触发，可通过 preventDefault 取消。 |
| beforeUpdateStroke| SignatureEvent | 笔画更新前回调。 |
| afterUpdateStroke | SignatureEvent | 笔画更新后回调。 |
| endStroke | SignatureEvent | 笔画结束时触发。 |

$3

`typescript
import type { Options as SignaturePadOptions } from "signature_pad";

type SigOption = SignaturePadOptions;

// 你可以传入 signature_pad 支持的所有配置，例如：
// dotSize?: number;
// minWidth?: number;
// maxWidth?: number;
// minDistance?: number;
// throttle?: number;
// velocityFilterWeight?: number;
// penColor?: string;
// backgroundColor?: string;
// compositeOperation?: GlobalCompositeOperation;
// canvasContextOptions?: CanvasRenderingContext2DSettings;
`

$3

`typescript
interface WaterMarkOption {
text?: string; // 水印文本（默认：""）
font?: string; // 字体样式（默认："20px sans-serif"）
style?: string; // 样式类型："all" | "stroke" | "fill"（默认："fill"）
fillStyle?: string; // 填充颜色（默认："#333"）
strokeStyle?: string; // 描边颜色（默认："#333"）
x?: number; // 填充文本 X 位置（默认：20）
y?: number; // 填充文本 Y 位置（默认：20）
sx?: number; // 描边文本 X 位置（默认：40）
sy?: number; // 描边文本 Y 位置（默认：40）
}
`

$3

`typescript
interface TrimResult {
canvas: HTMLCanvasElement; // 离屏画布（已裁剪）
dataUrl: string; // 方便直接使用的裁剪后 data URL
bounds: { x: number; y: number; width: number; height: number }; // 裁剪区域（像素）
}

interface TrimOptions {
format?: string; // 传给 canvas.toDataURL 的格式
encoderOptions?: number; // JPEG/WebP 质量
backgroundColor?: string;// 覆盖用于检测留白的背景色
}
`

💡 示例

$3

`vue



`

$3

`vue



`

$3

`vue



`

$3

`vue



`

$3

`vue



`

$3

`vue



`

$3

`vue



`

该功能基于 issue #49 中的裁剪方案：组件复制当前画布，计算笔迹的最小包围盒并裁剪，只返回裁剪后的结果，不会修改用户正在编辑的画布。

🔧 高级用法

$3

`vue



`

🌐 浏览器支持

Vue3 Signature 适用于所有现代浏览器：

- ✅ Chrome（最新版）
- ✅ Firefox（最新版）
- ✅ Safari（最新版）
- ✅ Edge（最新版）
- ✅ Opera（最新版）
- ✅ 移动浏览器（iOS Safari、Chrome Mobile）

🤝 贡献

欢迎贡献！请随时提交 Pull Request。

1. Fork 本仓库
2. 创建你的特性分支（git checkout -b feature/AmazingFeature）
3. 提交你的更改（git commit -m 'Add some AmazingFeature'）
4. 推送到分支（git push origin feature/AmazingFeature`）
5. 打开一个 Pull Request

📝 更新日志

详细更新日志请查看 Releases。

🙏 致谢与依赖

$3

这个 Vue 3 组件是对 signature_pad 的封装 - 最流行和可靠的 HTML5 Canvas 签名库。

为什么选择 signature_pad？
- ⭐ 13,000+ GitHub 星标 - 受到全球数千名开发者的信赖
- 🏆 行业标准 - 在无数生产应用中使用
- 🎨 流畅绘制 - 采用先进的贝塞尔曲线插值算法，实现自然的签名效果
- 📱 触摸优化 - 完美支持触摸屏和手写笔输入
- 🔧 维护良好 - 活跃的开发和定期更新
- 📦 轻量级 - 最小的体积，最大的功能

库信息：
- 作者：Szymon Nowak
- 仓库：github.com/szimek/signature_pad
- 许可证：MIT
- 当前版本：5.1.1

通过使用 Vue3 Signature，你可以获得 signature_pad 的全部功能，同时享受 Vue 3 组合式 API 的简洁性。

📄 许可证

MIT License

Copyright (c) 2024 Shayne Wang

---

🔗 相关项目

- vue-signature - Vue 2.x 版本
- signature_pad - 底层签名库

---