Skip to content

neighborhood999/vue-signature-pad

BranchesTags

Repository files navigation

Vue Signature Pad

Build Status npm styled with prettier

Vue component wrap for signature pad

Note: If you are still using Vue 2, please install 2.0.5 version, for Vue 3 you can install the latest publish version.

Demo Vue 2

Edit Vue Signature Pad Demo

Demo Vue 3

Edit Vue Signature Pad Demo

Installation

$ yarn add vue-signature-pad

Usage for Vue 2

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>

Usage for Vue3

import { createApp } from 'vue'
import App from './App.vue'
import { VueSignaturePad } from 'vue-signature-pad';

const app = createApp(App)
app.component("VueSignaturePad", VueSignaturePad);
app.mount('#app')
<template>
  <div id="app">
    <VueSignaturePad ref="signaturePad" />
    <div>
      <button @click="save">Save</button>
      <button @click="undo">Undo</button>
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: 'MySignaturePad',
  methods: {
    undo() {
      this.$refs.signaturePad.undoSignature();
    },
    save() {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
      console.log(isEmpty);
      console.log(data);
    }
  }
});
</script>

In Single Component

<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>
import { defineComponent } from "vue";
import { VueSignaturePad } from 'vue-signature-pad';

export default defineComponent({
  name: 'MySignaturePad',
  components: { VueSignaturePad },
  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. -
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

About

🖋 Vue Signature Pad Component

Topics

components vue vue-components signature-pad

Resources

Readme

License

MIT license
Activity

Stars

532 stars

Watchers

8 watching

Forks

76 forks
Report repository

Releases 21

3.0.2 Latest
Mar 15, 2022
+ 20 releases

Packages

No packages published

Used by 1k

  • @TriyogaGP
  • @tangyuan668
  • @zilahreone
  • @chinyishan
  • @mznsolucoes
  • @tdssoftwaresolutions
  • @DiegoHiguero
  • @Kishore0033
+ 1,036

Contributors 13

Languages