Electronic signature for Vue3
npm install vue3-signature一个流畅优雅的 Vue 3 电子签名组件
基于 signature_pad - 最流行的 HTML5 Canvas 签名库
---
无需安装,直接在浏览器中体验 Vue3 Signature:
👉 GitHub Pages 在线演示 - 在浏览器中试用所有功能!
> 演示展示了组件的所有功能,包括绘制、保存、撤销、水印等。
想要部署自己的演示吗?查看我们的部署指南了解如何部署到 GitHub Pages 的详细说明。
在线演示现在支持导入图片功能:
- 📁 上传本地图片文件
- 🔗 从URL加载图片
- 🖼️ 一键尝试示例图片
非常适合编辑现有签名、添加标注或使用模板!
基于 signature_pad 构建 - 这是由 Szymon Nowak 开发的行业标准 HTML5 Canvas 平滑签名绘制库,拥有 13k+ GitHub 星标,可靠性经过验证。
- 📱 触摸和鼠标支持 - 在移动设备和桌面设备上无缝工作
- 🎨 可自定义 - 完全可定制的画笔颜色、背景和签名样式
- 💾 多种导出格式 - 导出签名为 PNG、JPEG 或 SVG 格式
- 🔄 撤销支持 - 简单的撤销功能,提供更好的用户体验
- 🖼️ 水印支持 - 为签名添加自定义水印
- 🚫 禁用模式 - 在可编辑和只读状态之间切换
- 📐 响应式 - 自动适应容器大小
- 🎯 TypeScript 支持 - 包含完整的 TypeScript 类型定义
- ⚡ 轻量级 - 小巧的包体积,无不必要的依赖
- 🌍 跨平台 - 适用于所有现代浏览器和移动设备
!演示
``bash使用 npm
npm install vue3-signature
$3
步骤 1: 全局注册组件
`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
ref="signature"
:sigOption="options"
:w="'800px'"
:h="'400px'"
/>
`📖 文档
$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
ref="signature"
:sigOption="options"
:w="'100%'"
:h="'400px'"
/>
`$3
`vue
`$3
`vue
ref="signature"
:disabled="isDisabled"
:w="'800px'"
:h="'400px'"
/>
`$3
`vue
`$3
`vue
ref="signature"
:w="'100%'"
:h="'100%'"
:clearOnResize="false"
/>
`$3
`vue
![裁剪后的签名]()
`该功能基于 issue #49 中的裁剪方案:组件复制当前画布,计算笔迹的最小包围盒并裁剪,只返回裁剪后的结果,不会修改用户正在编辑的画布。
🔧 高级用法
$3
`vue
电子签名板
ref="signature"
:sigOption="options"
:disabled="isDisabled"
:w="'100%'"
:h="'400px'"
class="signature-pad"
/>
预览:
![签名预览]()
`🌐 浏览器支持
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`)详细更新日志请查看 Releases。
这个 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 的简洁性。
Copyright (c) 2024 Shayne Wang
---
- vue-signature - Vue 2.x 版本
- signature_pad - 底层签名库
---