手写签名生成 - 鼠标手绘电子签名导出透明PNG

签合同、批文件、给邮件加个落款，越来越多的人需要一个能反复使用的电子签名。扫描纸质签名要经过拍照、抠图、去底色好几道工序，边角还发灰；直接在屏幕上手写最省事——笔迹天生就是干净的线条，导出时只保留笔画本身，背景透明，贴到白纸黑字的文档上完全看不出是贴上去的。

写坏一笔不用重来：撤销只退最后一笔，颜色和粗细改完立刻生效，满意了再导出。导出尺寸按笔迹实际范围裁剪并留出边距，不会带着一大片空白；透明通道保证落在深色底上也干净。签名是很私人的东西，本工具从绘制到导出全部在你的浏览器里完成，笔迹一个字节都不出门。

这个工具解决你的问题了吗？

使用步骤

按住画布拖动鼠标（触屏设备直接用手指）写下签名。
写错点「撤销一笔」，或换颜色与粗细继续补笔。
满意后点「下载签名 PNG」，得到透明底签名图。
把 PNG 插入文档、邮件或 PDF 需要落款的位置。

计算原理与示例

怎么写得更像真签名

放慢速度、一笔连成，转折处圆滑一点最像手写；鼠标不好控制可以直接用触屏与手写笔。写完不满意单笔撤销比全部清空更省时间；颜色建议用蓝黑色，比纯黑更像签字笔。

透明 PNG 怎么用

透明底 PNG 可以直接插入 Word、WPS、PDF 编辑器的图片层，拖到签名位置即可，不用再抠图；作为邮件签名档同样适用。若要贴在深色背景上，选浅色笔迹重写一份对比更清楚。

导出的尺寸是怎么定的

导出范围按笔迹包围盒加边距自动裁剪，写多大导多大，不会带整块空白画布；想要固定尺寸（比如合同系统要求 200×80），签名时尽量把字写在相近范围内，或导出后用图片缩放工具调整。

签名图片会不会被泄露

不会。绘制、撤销、导出全部在浏览器本地完成，页面没有上传环节，关闭页面后笔迹也不保留；导出的 PNG 请自己妥善保管，别在不可信的场合发送原图，防止被他人抠出冒用。

代码示例

JavaScript 画手写笔迹并导出透明 PNG

// 用 pointer 事件取点（比 mousedown + mousemove 更准，天然支持触摸与压感笔）
function drawSignature(canvas) {
  const ctx = canvas.getContext('2d');
  ctx.lineWidth = 3;
  ctx.lineCap = 'round';                  // 不设会在拐点露出方角
  ctx.lineJoin = 'round';
  ctx.strokeStyle = '#111';
  let drawing = false;
  const points = [];
  canvas.addEventListener('pointerdown', (e) => {
    drawing = true;
    points.push([e.offsetX, e.offsetY]);
    canvas.setPointerCapture(e.pointerId);
  });
  canvas.addEventListener('pointermove', (e) => {
    if (!drawing) { return; }
    points.push([e.offsetX, e.offsetY]);
    ctx.beginPath();
    ctx.moveTo(points[points.length - 2][0], points[points.length - 2][1]);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
  });
  canvas.addEventListener('pointerup', () => { drawing = false; });
  // 透明背景是关键：canvas 不填底色，导出的 PNG 就是透明底，可直接叠在文档上
  return () => canvas.toDataURL('image/png');
}

Python Pillow 画一笔并导出透明 PNG

from PIL import Image, ImageDraw

# RGBA 且不填底色 → 导出透明 PNG（叠在合同/文档上不遮文字）
canvas = Image.new('RGBA', (600, 200), (0, 0, 0, 0))
draw = ImageDraw.Draw(canvas)
draw.line([(40, 150), (140, 60), (240, 140), (340, 50), (520, 120)], fill=(17, 17, 17, 255), width=4, joint='curve')
canvas.save('signature.png')

常见问题

手写签名生成后可以商用吗？

你自己手写的签名当然归你自己用，签合同、签单据都没有问题；工具不提供名人字体模仿生成，也不涉及字体版权。

为什么导出的是 PNG 不是 JPG？

JPG 不支持透明通道，签名贴到文档上会带白色方块；PNG 的 alpha 透明才能只留笔画本身，这也是电子签名的事实标准格式。

可以用手指在手机上写吗？

可以。画布支持触屏与手写笔，手机竖屏也能写；屏小写不开建议横屏，笔画粗细调到 3 以上更清楚。

写错了一笔怎么办？

点「撤销一笔」只退最后一笔，其余笔画保留；全部重写用「清空重写」。撤销可以连点，一直退到满意的那一笔。

能把签名保存下来下次接着用吗？

本工具不做云端保存，签名只在当前页面里存在；需要复用就导出 PNG 存到手机或电脑，下次作为图片直接插入，或用图片工具再加工。

导出的签名边缘有锯齿吗？

笔画用圆头线条渲染并做了抗锯齿，正常屏与高分屏下边缘都平滑；若把小图放大很多倍会出现锯齿，需要大尺寸就写得大一点再导出。

和艺术签名设计网站有什么区别？

那些网站用字体套出「假手写」效果，法律文书上未必被认可；本工具是你真实笔迹的电子化，效力等同于你亲手签字，而且不依赖任何字体库。

延伸阅读

手写签名怎么放进电子文档

来自本站原创文章，讲清这个工具背后的算法与口径。