官方地址 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空白部分裁剪
