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

Vue Signature Pad

Build Status npm styled with prettier

Vue component wrap for signature pad

Demo

Edit Vue 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
width. | - | | height | String |
100%
| Set the
div
height. | - | | options | Object | Reference | Set the signature pad options. | Reference | | images | Array |
[]
| Merge signature with the provide images. |
['A.png', 'B.png', 'C.png']
or
[{ 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
or
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

LICENSE

MIT © Peng Jie

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.