Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-signature-pad with all npm packages installed. Try it out:

var vueSignaturePad = require("vue-signature-pad")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-signature-pad v2.0.0

SignaturePad component for Vue.js

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

NameTypeDefaultDescriptionExample
widthString100%Set the div width.-
heightString100%Set the div height.-
optionsObjectReferenceSet the signature pad options.Reference
imagesArray[]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 }]
customStyleObject{}Custom div style.{ border: black 3px solid }

Methods

NameArgument TypeDescription
saveSignature(type, encoderOptions)(String, Number)Will return target canvas status and data.
undoSignature()-Undo
clearSignature()-Clear
mergeImageAndSignature(signature)Object or StringProvide images as props and will merge with signature.
addImages(images)ArrayProvide 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)StringReturns 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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free