v-perfect-signature

Pressure-sensitive signature drawing for Vue 2 and 3 built on top of perfect-freehand.

View Demo View Github

Install

yarn add v-perfect-signature
Bash

Usage

<template>
  <VPerfectSignature :stroke-options="strokeOptions" ref="signaturePad" />
</template>

<script lang="ts">
import Vue from 'vue'
import VPerfectSignature, { StrokeOptions } from 'v-perfect-signature'

export default Vue.extend({
  components: {
    VPerfectSignature
  },
  data: () => ({
    strokeOptions: {
        size: 16,
        thinning: 0.75,
        smoothing: 0.5,
        streamline: 0.5
    } as StrokeOptions
  }),
  methods: {
    toDataURL() {
        const dataURL = this.$refs.signaturePad.toDataURL()
        console.log(dataURL)
    }
  }
})
</script>
HTML

Props

Name Type Default Description
width String 100% Set canvas width
height String 100% Set canvas height
backgroundColor String rgba(0,0,0,0) Canvas background color
penColor String #000 Canvas pen color
strokeOptions Object Reference Perfect freehand options

Methods

Name Argument Type Description
toDataURL(type) String Returns signature image as data URL
fromDataURL(dataUri) String Draws signature image from data URL
toData - Returns signature image as an array of array of input points
fromData(data) Array Draws signature image from array of array of input points
clear() - Clears the canvas
isEmpty() - Returns true if canvas is empty
resizeCanvas(shouldClear) Boolean Resizes and recalculate dimensions

Note: Like signature_pad, fromDataURL does not populate internal data structure. Thus, after using fromDataURL, toData won't work properly.

Events

Name Type Default Description
onBegin Function - Fired when stroke begin
onEnd Function - Fired when stroke end