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 v2.1.4 added @begin-stroke and @end-stroke events:

<template>
  <div id="app">
    <VueSignaturePad
      width="500px"
      height="500px"
      ref="signaturePad"
      :options="{}"
      @begin-stroke='beginStroke'
      @end-stroke='endStroke'
    />
  </div>
</template>
<script>
export default {
  methods: {
    beginStroke() {
      console.log('=== Begin ===');
    },
    endStroke() {
      console.log('=== End ===');
    }
  }
};
</script>

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 } | | scaleToDevicePixelRatio | Boolean | true | Scale the canvas up to match the device pixel ratio. | - |

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