Press "Enter" to skip to content

Javascript Digital Signature Drawing Library for Vue 3

Signature Perfect V is a pressure-sensitive signature drawing library for Vue 2/3 that, based on Perfect Perfect Hand, enables you to perfectly draw pressure-sensitive free strokes.

signature js, javascript digital signature library, jquery signature pad save image, signature pad jquery github, signature canvas javascript, online signature pad jquery, signature pad html5

How to make use of it:

Install and download:

# Yarn
$ yarn add v-perfect-signature

# NPM
$ npm i v-perfect-signature --save

1. Install and import the v-perfect-signature component.

import Vue from 'vue'
import VPerfectSignature, { StrokeOptions } from 'v-perfect-signature'

2. Insert the signature panel into the template.

<VPerfectSignature :stroke-options="strokeOptions" ref="signaturePad" />
export default Vue.extend({
  components: {
    VPerfectSignature
  },
  data: () => ({
    strokeOptions: {
      // refer to https://github.com/steveruizok/perfect-freehand#options
    } as StrokeOptions
  }),
  methods: {
    toDataURL() {
      const dataURL = this.$refs.signaturePad.toDataURL()
      console.log(dataURL)
    }
  }
})

3. The default component props.

width: {
  type: String,
  required: false,
  default: DEFAULT_WIDTH
},
height: {
  type: String,
  required: false,
  default: DEFAULT_HEIGHT
},
backgroundColor: {
  type: String,
  required: false,
  default: DEFAULT_BACKGROUND_COLOR
},
penColor: {
  type: String,
  required: false,
  default: DEFAULT_PEN_COLOR
},
strokeOptions: {
  type: Object as PropType<StrokeOptions>,
  required: false,
  default: {}
}

4. API methods.

// convert signature image to data URL
toDataURL(type)

// draw signature from data URL
fromDataURL(dataUri)

// convert signature image into an array of input points
toData

// draw signature image from an array of input points
fromData(data)

// clear the canvas
clear()

// check if the canvas is empty
isEmpty();

// resize the canvas
resizeCanvas(shouldClear)

Pressure-sensitive Signature Drawing Library For Vue, v-perfect-signature Plugin/Github, capture signature using html5 canvas


See Demo And Download

Official Website(wobsoriano): Click Here

This superior jQuery/javascript plugin is developed by wobsoriano. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.