Vue Signature Pad

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

<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)	String	Draw image from data URL.
isEmpty()	-	Return signature canvas have data.

Credits

szimek/signature_pad - HTML5 canvas based smooth signature drawing

LICENSE

MIT © Peng Jie