大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 Signature

Signature Pad is a JavaScript library for drawing smooth signatures. It's HTML5 canvas based and uses variable width Bézier curve interpolation based on Smoother Signatures post by Square.

Signature Pad 是一个用于绘制平滑签名的 JavaScript 库，其基于 HTML5 画布，使用基于 Square 发布的 Smoother Signatures 的可变宽度贝塞尔曲线插值，适用于所有现代桌面和移动浏览器，并且不依赖任何外部库。

目前 Signature 在 Github 通过 MIT 协议开源，有超过 10.3k 的 star、2.1k 的 fork、11.6k 的项目依赖量，妥妥的前端优质开源项目。

如何使用 Signature

首先可以使用 npm 安装相应依赖：

安装后可以通过下面方法使用：

const canvas = document.querySelector("canvas");
const signaturePad = new SignaturePad(canvas);

// 返回签名图像作为数据 URL
signaturePad.toDataURL();
 // 作为 PNG 保存
signaturePad.toDataURL("image/jpeg");
// 作为 JPEG 保存
signaturePad.toDataURL("image/jpeg", 0.5);
// 将图像保存为 JPEG，图像质量为 0.5
signaturePad.toDataURL("image/svg+xml");
// 将图像另存为 SVG 数据 url

// 返回 svg 字符串而不转换为 base64
signaturePad.toSVG(); // "<svg...</svg>"
signaturePad.toSVG({includeBackgroundColor: true});
// 添加背景颜色到 svg 输出

// Draws signature image from data URL (mostly uses https://mdn.io/drawImage under-the-hood)
// NOTE: This method does not populate internal data structure that represents drawn signature. Thus, after using #fromDataURL, #toData won't work properly.
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");
// Draws signature image from data URL and alters it with the given options
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...", { ratio: 1, width: 400, height: 200, xOffset: 100, yOffset: 50});

// 以点组数组的形式返回签名图像
const data = signaturePad.toData();
// 从数据 URL 中绘制签名图像并使用给定的选项更
signaturePad.fromData(data);
// 从点组数组中绘制签名图像，而不清除现有图像（如果未提供，则清除默认为 true）
signaturePad.fromData(data, { clear: false});
// 清除画布
signaturePad.clear();
// 返回画布是否是空
signaturePad.isEmpty();
// 移除所有事件
signaturePad.off();
// 重新绑定所有事件
signaturePad.on();

官方提供了演示网址（https://szimek.github.io/signature_pad/），适用于桌面和移动浏览器，感兴趣的开发者可以查看其源代码，了解有关如何处理窗口大小调整和高 DPI 屏幕的一些提示。

更多关于 Signature 的用法和示例可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/szimek/signature_pad

https://szimek.github.io/signature_pad/

https://www.youtube.com/watch?v=NPxjJyd6W0M

https://dev.to/stackfindover/how-to-create-signature-pad-in-html-signature-pad-javascript-3866

https://pspdfkit.com/blog/2023/how-to-add-a-signature-pad-using-javascript/