H5-signature NPM

h5-signature

基于 canvas 的手写签名. online demo

Install

    npm install h5-signature
    # or
    yarn add h5-signature

    # development
    npm run start
    # build
    npm run build

Usage

<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]
});