黑白梦黑白梦

toggle navtoggle nav
  • 文章
  • 专栏
  • 文章
  • 专栏

signature_pad 电子签名板

发布于 2021-11-18, 更新于 2023-04-08

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 前端开源库

收集一些好用的前端开源库,主要是 npm 包

©2015-2026 黑白梦 粤ICP备15018165号

联系: heibaimeng@foxmail.com