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();