signature_pad 电子签名板

signature_pad 是用于绘制平滑签名的JavaScript库。 它是基于HTML5 canvas ,并基于Square提供的Smoother Signatures使用可变宽度的贝塞尔曲线插值。 它适用于 PC 和移动端,并且不依赖于任何外部库。

https://github.com/szimek/signature_pad

npm install --save signature_pad

比起其他包,优势是操作体验很好,它甚至还有压感。

传入 canvas 实例化即可

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

保存图片,注意保存 jpg 的话,需要设置背景色

// Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)
signaturePad.toDataURL(); // save image as PNG
signaturePad.toDataURL("image/jpeg"); // save image as JPEG
signaturePad.toDataURL("image/svg+xml"); // save image as SVG

常用操作

// Clears the canvas
signaturePad.clear();

// Returns true if canvas is empty, otherwise returns false
signaturePad.isEmpty();

// Unbinds all event handlers
signaturePad.off();

// Rebinds all event handlers
signaturePad.on();
本文收录于专栏
收集一些好用的前端开源库,主要是 npm 包