基于 canvas 的手写签名. online demo
npm install h5-signature
# or
yarn add h5-signature
# development
npm run start
# build
npm run build<div style="width:300px;height:300px" id="container"></div>;
var container = document.getElementById("container");
new Signature.default({
root: container, // root dom container
color: "#000", // draw color
lineWidth: 8, // draw line width
width: "auto", // canvas width, auto fill to root width if set to 'auto'
height: "auto", // canvas height, auto fill to root height if set to 'auto'
openSmooth: true, // if enable brush thickness effect
rotate: 0, // export rotated image, available values: -90/90/-180/180
minWidth: 2, // minimize linWidth
minSpeed: 1.5, // minimize brush move speed
scaleRatio: window.devicePixelRatio, // canvas scale ratio
maxWidth: null, // canvas element style max width
maxWidthDiffRate: 20, // Smooth transition threshold
resizeDebounceTime: 200, // window resize debounce elapse time
maxHistoryLength: 0, // max history length, no limit if set to 0
exportPadding: 0, // padding from edge
exportMaxWidth: 300, // export max image width
exportMaxHeight: 300, // export max image height
undoRedoStateChange: Function, // state change callback if undo/redo state changed
onDrawStart: Function, // called when draw starts, [MouseEvent, point]
onDrawing: Function, // called when draw going , [MouseEvent, point]
onDrawUp: Function, // called when draw up , [MouseEvent, Image]
});parameters: width [number]
set draw lineWidth dynamic
parameters: color [string]
set draw color dynamic
parameters: options Object
set override options, all properties same as constructor parameters, see above
clear the canvas
go prev draw stage
go next draw stage
query if can undo
query if can redo
query if canvas is nothing drawed
parameters: origin [boolean]
get the cropped or origin canvas dom
destroy the instance
download the origin draw image