电子签名怎么弄？在线手写签名导出透明 PNG 和 SVG

微信发来一份录用通知要你签字回传、投标文件要附一张手写签名、审批单扫描件上要补个名字——多数时候你要的不是什么复杂的签署系统，只是一张干净的签名图片。

这篇用 NBTools 的电子签名工具讲清楚：鼠标或手指怎么签、三种导出格式怎么选、以及一个很多人搞混的问题——它和「数字签名」不是一回事。签名在你的浏览器本地用 Canvas 绘制，不上传服务器。

四步拿到签名图

1. 在框里签名：用鼠标拖动，或直接用手指在手机、平板上写。画布高 260px，日常签名幅度够用。
2. 调颜色和粗细：「画笔颜色」默认近黑色，可按需要改；「画笔粗细」可在 1 到 10 之间调（默认 3）。
3. 写坏了就重签：点「清除重签」，画布清空后重新写。这一步没有撤销，所以要重来就是整张清掉。
4. 选格式下载：点「下载透明PNG」「下载白底PNG」或「下载SVG」，图片直接存到本地。

三种导出格式怎么选

简单记：要贴图用透明 PNG，要打印用白底 PNG，要放大用 SVG。前两种是位图，放大到很大会看出锯齿；SVG 是矢量，放大后边缘依然是平滑的。

为什么写出来的线条有粗细变化

把「画笔粗细」滑到某个值时，工具并不是整条线都用同一个宽度。它按这个值算出一对上下限：粗的一端取你设的值，细的一端取其约三分之一（代码里的 minWidth 与 maxWidth），笔画随笔迹自然过渡。所以签出来的字有轻重感，不像用等宽线条画出来的那么生硬。

默认值是 3，日常签字比较合适。想要更稳重就往大调，签名字很小、画布里写得密，就往小调一点。

手机上能用吗

可以。画布做了触屏适配，手指直接在屏幕上写就行，不会一边写一边把页面拖走。手机屏幕小、手指粗，写出来的字通常比鼠标签的更潦草——如果对方要看清楚，建议在平板上用手指签，或者在电脑上用鼠标慢慢写。导出后的图片会自动按屏幕像素密度生成，在高分屏上不会发虚。

重要：这不是「数字签名」

这一点必须讲清楚，免得用错地方。本工具产出的是一张手写笔迹的图片——它记录了你写的字形，仅此而已：

• 它不包含身份信息、数字证书或时间戳；
• 它不加密文件，也不对文件内容做校验；
• 把这张图贴到文件上，文件之后被改没改，看不出来。

因此，它和通常说的「数字签名 / 可靠电子签名」不是同一类东西。一份签了名的文件有没有法律效力，取决于具体场景、双方的约定以及对方平台的验证方式，不会因为「签名是电子的」就自动成立。涉及劳动合同、借款、招投标这类重要文件，请按对方明确要求的签署方式办理。

如果你的需求是直接在一个 PDF 文件里落签，应该用 PDF 签名工具，它面向的是 PDF 文档本身。这两个工具解决的问题不同：本页做的是「生成签名图片」，PDF 签名做的是「把签名放进 PDF」。

签完之后怎么用

• 插进 Word / WPS：插入图片后把环绕方式设成「浮于文字上方」，拖到落款处即可。
• 贴到 PDF 上：用 PDF 签名工具直接签；或先把签名图保存好，再用图片方式插入。
• 微信 / 邮件回传：直接发送白底 PNG，对方在手机上看最省事。
• 反复使用的签名：导出一份存好，下次直接插入图片，不必每次重签。

常见问题

签名会上传吗？

不会。签名完全在你的浏览器本地用 Canvas 绘制，绘制过程和导出的图片都不会离开你的设备，刷新页面即清空。

透明 PNG 和白底 PNG 有什么区别？

透明 PNG 没有背景色，叠在合同、带底纹的文件上不会遮住下面的内容；白底 PNG 带白色背景，适合直接插入普通文档、打印或在聊天窗口里查看。

支持手机触屏签名吗？

支持。画布做了触屏适配，可直接用手指在手机或平板上书写，导出图片会按屏幕像素密度生成，高分屏下不发虚。

能导出矢量图吗？

可以。点「下载SVG」导出矢量文件，放大后边缘依然平滑，适合印刷、大尺寸海报或放进设计稿。

这个签名有法律效力吗？

本工具产出的是手写笔迹图片，不含数字证书、时间戳等要素，不等同于数字签名。文件是否有效取决于具体场景、双方约定与对方平台的验证方式，重要合同请按对方要求的签署方式办理。

想在 PDF 文件上直接签字怎么办？

用 PDF 签名工具，它面向 PDF 文档本身落签。本工具负责生成签名图片，两者是上下游关系：也可以先把图片导出，再作为图片插入到 PDF 中。

写错了能撤销一笔吗？

不能。页面只提供「清除重签」，会清空整张画布重来。建议一次写完，或写之前先在纸上练两遍。