Skip to content
πŸ–‹ Vue Signature Pad Component
JavaScript
Branch: master
Clone or download
Latest commit dcf5ba8 Oct 11, 2019

README.md

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

You can’t perform that action at this time.