v-perfect-signature

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

Demo: https://wobsoriano.github.io/v-perfect-signature

Install

pnpm add v-perfect-signature

Usage

<script setup>
  import { ref } from 'vue';
  import VPerfectSignature from 'v-perfect-signature';

  const signaturePad = ref();
  const strokeOptions = {
    size: 16,
    thinning: 0.75,
    smoothing: 0.5,
    streamline: 0.5,
  };

  function toDataURL() {
    const dataURL = signaturePad.value.toDataURL();
    console.log(dataURL);
  }
</script>

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

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 |

Credits

• perfect-freehand - Draw perfect pressure-sensitive freehand strokes.
• signature_pad - HTML 5 canvas based smooth signature drawing.
• vue-signature-pad - Vue wrapper of signature_pad.
• vue-demi - Creates Universal Library for Vue 2 & 3

License

MIT - Copyright (c) 2022 Robert Soriano