Vue Signature Pad
Vue component wrap for signature pad
Demo
Installation
yarn add vue-signature-padUsage
;; Vue;<template> <div id="app"> <VueSignaturePad width="500px" height="500px" ref="signaturePad" /> <div> <button @click="save">Save</button> <button @click="undo">Undo</button> </div> </div></template><script> export default { name: 'MySignaturePad', methods: { undo() { this.$refs.signaturePad.undoSignature(); }, save() { const { isEmpty, data } = this.$refs.signaturePad.saveSignature(); console.log(isEmpty); console.log(data); } } }</script>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:
<template> <div id="app"> <VueSignaturePad width="500px" height="500px" ref="signaturePad" :options="{ onBegin, onEnd }" /> </div></template><script>export default { methods: { onBegin() { console.log('=== Begin ==='); }, onEnd() { console.log('=== End ==='); } }}</script>Props
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
| width | String | 100% |
Set the div width. |
- |
| height | String | 100% |
Set the div height. |
- |
| saveType | String | image/png |
Image type, support image/png, image/jpeg, image/svg+xml. |
- |
| 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() |
- | 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
