Vue Signature Pad Component

Vue Signature Pad Component

Vue component wrap for signature pad.

Vue Signature Pad

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

Github Repository