https://github.com/semdy/h5-signature

Signature based html5 canvas
https://github.com/semdy/h5-signature

canvas drawing es6 html5 html5-canvas signature webpack

Last synced: 3 days ago
JSON representation

Signature based html5 canvas

• Host: GitHub
• URL: https://github.com/semdy/h5-signature
• Owner: semdy
• Created: 2021-11-08T05:20:09.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-09-01T02:33:31.000Z (about 1 year ago)
• Last Synced: 2024-10-18T16:27:49.468Z (29 days ago)
• Topics: canvas, drawing, es6, html5, html5-canvas, signature, webpack
• Language: JavaScript
• Homepage: https://semdy.github.io/h5-signature/demo
• Size: 319 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# h5-signature

基于 canvas 的手写签名. [online demo](https://semdy.github.io/h5-signature/demo)

## Install

```bash

    npm install h5-signature

    # or

    yarn add h5-signature

    # development

    npm run start

    # build

    npm run build

```

## Usage

```js

;

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]

});

```


## instance methods

#### setLineWidth

    parameters: width [number]

set draw lineWidth dynamic

#### setColor

    parameters: color [string]

set draw color dynamic

#### setOptions

    parameters: options Object

set override options, all properties same as constructor parameters, see above

#### clear

clear the canvas

#### undo

go prev draw stage

#### redo

go next draw stage

#### canUndo

query if can undo

#### canRedo

query if can redo

#### isEmpty

query if canvas is nothing drawed

#### getResult

    parameters: origin [boolean]

get the cropped or origin canvas dom

#### destroy

destroy the instance

#### downloadFile

download the origin draw image

## Thanks

[smooth-signature](https://github.com/linjc/smooth-signature)