官方地址 signature_pad
Signature Pad是一个用于绘制平滑签名的JavaScript库。 它是基于HTML5画布.它适用于所有现代桌面和移动浏览器，不依赖于任何外部库
使用方法
npm install signature_pad --save
import SignaturePad from 'signature_pad'
var canvas = document.querySelector("canvas");
var signaturePad = new SignaturePad(canvas);
// 返回签名图像作为数据URL（ 有关可能的参数列表，请参见 https://mdn.io/todataurl）
signaturePad.toDataURL(); //将图片另存为PNG
signaturePad.toDataURL("image/jpeg"); //将图片另存为JPEG
signaturePad.toDataURL("image/svg+xml"); //将图片另存为 SVG
// 将数据加载到画布上.参数为数据本身, 无返回值
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");
// 清除画布
signaturePad.clear();
// 判断画布是否为空，空返回 true 否则 false
signaturePad.isEmpty();
// 取消绑定所有事件处理程序
signaturePad.off();
// 重新绑定所有事件处理程序
signaturePad.on();
属性配置项
| 参数 | 类型 | 默认值 | 注释 |
|---|---|---|---|
| dotSize | float or function(取返回值) | (minWidth + maxWidth/2) | 作用为点击画布的时候,绘制一个半径为dotSize的圆 |
| minWidth | numbe | 0.5 | 画笔的笔锋 |
| maxWidth | numbe | 2.5 | 画笔的粗细 |
| throttle | number | 2.5 | 每秒绘制的次数,越大越耗性能,越细腻 |
| backgroundColor | string | null | 画布背景色,可以为 green 字符串,#FFFFFF rgb(0,0,0)格式 |
| penColor | string | #000000 | 画笔颜色,可以为 green 字符串,#FFFFFF rgb(0,0,0)格式 |
| velocityFilterWeight | float | 0.7 | 用于根据先前的速度修改新速度的重量 |
| onBegin | function | 回调函数,落笔时候的回调 | |
| onEnd | function | 回调函数,收笔时候的回调 |
使用方法
var signaturePad = new SignaturePad(canvas, {
minWidth: 5,
maxWidth: 10,
penColor: "rgb(66, 133, 244)"
});
或
var signaturePad = new SignaturePad(canvas);
signaturePad.minWidth = 5;
signaturePad.maxWidth = 10;
signaturePad.penColor = "rgb(66, 133, 244)";
图片出来会和你的画布一样大如果不需要多余的空白部分，可以看我我之前的一篇文章canvas空白部分裁剪
canvas空白部分裁剪
