neighborhood999/ vue-signature-pad

(2.0.2) 11 months ago

JavaScript

Vue.js

vue-components

View on GitHub

Need help with vue-signature-pad?

Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

neighborhood999

242 Stars

45 Forks

MIT License

220 Commits

35 Opened issues

Description

🖋 Vue Signature Pad Component

Services available

Need anything else?

Contributors list

Readme

Vue Signature Pad

Name: vue-signature-pad
Brand: vue-signature-pad
SKU: //neighborhood999/vue-signature-pad
Rating: 2.355 (242 reviews)

Vue component wrap for signature pad

Demo

Installation

$ yarn add vue-signature-pad

Usage

import Vue from 'vue';
import VueSignaturePad from 'vue-signature-pad';

Vue.use(VueSignaturePad);

vue-signature-pad use szimek/signature_pad default setting as

options

, feel free custom you wanted options. In v1.1 add

onBegin

and

onEnd

event callback:

Props

| Name | Type | Default | Description | Example | | :---------- | :----- | :------------------------------------------------------------------------------------------------------ | :--------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------ | | width | String |

100%

| Set the

div

100%

| Set the

div

[]

| Merge signature with the provide images. |

['A.png', 'B.png', 'C.png']

[{ src: 'A.png', x: 0, y: 0 }, { src: 'B.png', x: 0, y: 10 }, { src: 'C.png', x: 0, y: 20 }]

| | customStyle | Object |

{}

| Custom

div

style. |

{ border: black 3px solid }

Methods

| Name | Argument Type | Description | | :------------------------------------- | :--------------------------- | --------------------------------------------------------------------------- | |

saveSignature(type, encoderOptions)

(String, Number)

| Will return target canvas status and data. | |

undoSignature()

| - | Undo | |

clearSignature()

| - | Clear | |

mergeImageAndSignature(signature)

Object

String

| Provide

images

as props and will merge with signature. | |

addImages(images)

Array

| Provide the images merge with signature. Reference above

images

property. | |

lockSignaturePad()

| - | Lock target signature pad. | |

openSignaturePad()

| - | Open target signature pad. | |

getPropImagesAndCacheImages()

| - | Get all the images information. | |

clearCacheImages()

| - | Clear cache images. | |

fromDataURL(data, options, callback)

(String, Object, Callback)

| Draw image from data URL. | |

fromData(data)

String

| Returns signature image as an array of point groups. | |

toData()

| - | Draws signature image from an array of point groups. | |

isEmpty()

| - | Return signature canvas have data. |

Credits

szimek/signature_pad - HTML5 canvas based smooth signature drawing