签名生成器

1. 简介

签名生成器是一款基于浏览器的工具，可让您使用鼠标、触控板或触摸屏创建手写数字签名。您可以直接在画布上绘制签名，自定义其颜色和粗细，调整背景（包括透明背景），并将其导出为 SVG、PNG、JPG 和 WEBP 等多种图片格式。

该工具非常适合用于签署数字文档、为 PDF 添加签名、将签名嵌入电子邮件页脚，或为设计项目准备透明签名图片。由于所有操作都在您的浏览器中完成，因此无需上传文件或进行服务器端处理。您的签名会即时生成，并可立即下载为所需的格式。

无论您需要用于合同的透明 PNG、用于打印的可缩放 SVG，还是用于快速分享的 JPG，这款签名生成器都能为个人和专业用途提供快速且灵活的解决方案。

2. 工作原理

该工具使用交互式 HTML5 画布，用户可以在上面自由绘制。每一笔都会记录为一系列点，包括位置、时间和压力数据（如可用）。这些点随后会被处理为平滑曲线，从而生成自然流畅的手写效果，而不是粗糙或锯齿状的线条。

输入参数

• 画布区域：用于创建签名的绘图区域。
• 画笔颜色：选择十六进制格式的自定义书写颜色（内部会转换为 RGB）。
• 背景颜色：使用 RGBA 值选择纯色背景或透明背景。
• 画笔粗细：提供三个可选粗细级别，用于调整笔画的最小和最大宽度。
• 宽高比：可选择 16:9、4:3、3:4 或 1:1，以控制画布尺寸。

笔画渲染逻辑

在绘制过程中，系统会捕获鼠标指针或触摸事件，并将其转换为曲线片段。它会根据笔画速度动态调整线条粗细，以产生自然的书写效果。每一笔都会以结构化数据的形式保存，因此可以实现撤销、重新绘制背景等功能，而不会丢失签名内容。

验证规则

• 当画笔粗细小于 1 时，将自动使用支持的最小粗细值。
• 颜色输入必须采用有效的十六进制格式。
• 为防止图像变形，开始绘制后将禁止调整画布大小。
• 仅当存在笔画数据时，“撤销”功能才会删除最近的一笔。

输出格式

您可以将签名导出为以下格式：

• SVG – 可缩放矢量格式，非常适合高分辨率打印。
• PNG – 支持透明背景。
• JPG – 适用于日常使用的压缩图片格式。
• WEBP – 现代化且经过优化的图片格式。

限制

• 该工具不会验证身份，也不提供具有法律效力的身份认证。
• 签名需手动绘制，不能根据文本自动生成。
• 绘制完成后调整画布大小可能需要先清空画布。

3. 如何使用此工具

1. 为画布选择您喜欢的宽高比。
2. 选择画笔粗细级别。
3. 设置您想要的签名颜色。
4. 可根据需要选择背景颜色（或保持透明）。
5. 使用鼠标或触摸屏绘制您的签名。
6. 如有需要，使用撤销（Undo）删除最后一笔。
7. 点击清空（Clear）以完全重置画布。
8. 将您的签名下载为 SVG、PNG、JPG 或 WEBP 格式。

4. 实际示例

示例 1：用于 PDF 合同的透明 PNG

输入：

• 宽高比：4:3
• 画笔颜色：黑色（#000000）
• 背景：透明
• 画笔粗细：中等

输出：download.png（透明背景）

使用此文件可将您的签名插入 PDF 合同中，而不会出现白色背景框。

示例 2：用于打印的高分辨率 SVG

输入：

• 宽高比：16:9
• 画笔颜色：蓝色（#1a73e8）
• 背景：白色
• 画笔粗细：粗

输出：download.svg

由于 SVG 是矢量格式，因此无论缩放到信纸抬头还是印刷材料中，签名都能保持清晰锐利。

5. 开发者使用场景

- 文档自动化系统

将下载的签名图片集成到自动化文档生成流程中（例如合同、发票和协议）。

- 客户端签名采集

使用导出的 Base64 图片数据进行 AJAX 上传：

const dataUrl = signaturePad.toDataURL('image/png');
// 将 dataUrl 发送到后端 API 进行存储

- 在 Web 应用中嵌入 SVG

由于 SVG 输出为矢量格式，因此可以直接嵌入到 HTML 中：

<img src="signature.svg" alt="数字签名">

- 安全的数据处理

由于签名生成完全在浏览器中进行，因此除非开发者明确实现，否则无需服务器端处理。这有助于降低数据泄露风险。开发者可以在保存前于服务器端验证 Base64 字符串，以防止无效输入。

- PHP 后台处理

$base64 = $_POST['signature'];
$image = str_replace('data:image/png;base64,', '', $base64);
$image = base64_decode($image);
file_put_contents('signature.png', $image);

6. 常见问题

此签名具有法律效力吗？

没有。本工具仅生成您的手写签名数字图像。其法律效力取决于所在司法管辖区以及签名的具体使用方式。

我可以创建透明背景的签名吗？

可以。请选择透明背景，并下载为 PNG 或 SVG 格式。

哪种格式最适合打印？

建议使用 SVG，因为它支持无损缩放，非常适合高分辨率打印。

我可以更改画笔粗细吗？

可以。您可以从三种预设的笔画粗细级别中进行选择。

该工具会保存我的签名吗？

不会。除非您手动上传到其他地方，否则您的签名仅会在本地浏览器中生成，不会被保存。

我可以撤销签名的一部分吗？

可以。“撤销（Undo）”按钮会删除最近绘制的一笔。