# 电子签名教程：在线手写签名，导出透明背景PNG

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/esignature-guide


![图片](/api/file/download?path=article/202607/1783911812815_4432.png)

![图片](/api/file/download?path=article/202607/1783911824489_5615.png)

![图片](/api/file/download?path=article/202607/1783911835771_3167.png)
## 工具简介

电子签名是一款在浏览器里手写签名的免费工具：打开页面就能用鼠标或触控板直接书写，实时预览笔迹，写完后一键导出透明背景 PNG，可直接插入 Word 合同、PDF 文件或任何图片上。整个过程在本地完成，签名内容不会上传到服务器，安全又隐私。

工具还提供橡皮擦、撤销/重做、文字签名生成等辅助功能，以及透明、白色、网格、横线四种背景，无论是签电子合同、做设计素材，还是生成水印签名，都能快速搞定。

![电子签名工具初始界面](/api/file/download?path=article/202607/1783911812815_4432.png)

## 第一步：调画笔、选背景

打开工具后，先在左侧设置好书写参数：

- **工具**：默认是「画笔」，写错笔画可以切换到「橡皮」擦掉局部；
- **笔触颜色**：提供黑、蓝、红、绿、紫、橙 6 种常用色，也可以在色值框输入任意十六进制颜色；
- **笔触粗细**：拖动滑块调节，写中文签名建议 2~4，写英文花体可以调细一点；
- **背景**：导出透明签名选「透明」；需要打印练习可以选「网格」或「横线」辅助对齐；
- **画布尺寸**：默认 800×400，签名较长时可以把宽度调大。

## 第二步：手写签名

设置好后，在中央画布区域按住鼠标左键直接书写即可，笔画会实时显示在画布上，底部同步统计笔画数。

- 写错一笔不用重来：点「↩ 撤销」回退上一步，误撤销还能「↪ 重做」；
- 想整体重写，点「清空画布」一键还原；
- 不会手写也没关系：在「文字签名」框输入姓名，点生成按钮，系统会用书法字体生成签名并添加到画布。

![在画布上手写签名](/api/file/download?path=article/202607/1783911824489_5615.png)

## 参数说明

| 参数 | 类型 | 可选值 / 范围 | 说明 |
| --- | --- | --- | --- |
| 工具 | 单选 | 画笔 / 橡皮 | 橡皮可擦除局部笔迹 |
| 笔触颜色 | 颜色选择 | 6 色预设 + 自定义色值 | 支持十六进制颜色 |
| 笔触粗细 | 滑块 | 1~20 | 数值越大笔画越粗 |
| 背景 | 单选 | 透明 / 白色 / 网格 / 横线 | 透明背景导出后无底色 |
| 画布尺寸 | 数字输入 | 宽 × 高（像素） | 默认 800×400 |
| 导出格式 | 按钮 | PNG透明 / JPG白底 / SVG矢量 / PNG白底 | 按用途选择 |

## 第三步：导出下载

签名写好后，在左侧「导出」区选择格式：

- **PNG（透明）**：最常用，背景透明，插入文档后只显示笔迹；
- **PNG（白底）/ JPG（白底）**：适合打印或直接粘贴到聊天窗口；
- **SVG 矢量**：无限缩放不失真，适合设计师二次编辑。

点击对应按钮后浏览器会自动下载文件（文件名形如 signature_时间戳.png），下载目录里找到即可使用。

![导出透明背景签名](/api/file/download?path=article/202607/1783911835771_3167.png)

## 常见问题

**Q：导出的 PNG 插到 Word 里为什么有白底？**
A：请确认点的是「PNG（透明）」而不是「PNG（白底）」，并且左侧背景选的是「透明」。

**Q：签名会泄露吗？**
A：不会。所有绘制和导出都在浏览器本地完成，笔迹数据不会上传到任何服务器。

**Q：手机上能用吗？**
A：可以，手机浏览器打开后用手指直接在画布上书写即可。

**Q：能把签名加到 PDF 合同上吗？**
A：先导出透明 PNG，再用本站的「PDF 签名」工具把签名插入 PDF 指定位置。

## 总结与相关工具

电子签名工具三步搞定：调画笔 → 手写 → 导出透明 PNG。搭配以下工具可以完成更完整的签署流程：

- [PDF 签名](/tools/pdf_signature)：把签名直接插入 PDF 文档指定位置；
- [PDF 加水印](/tools/pdf_watermark)：给 PDF 批量添加签名水印；
- [图片压缩](/tools/image_compress)：签名图太大时无损压缩体积；
- [图片格式转换](/tools/image_convert)：PNG、JPG、WebP 之间互转。