Pressure-sensitive signature drawing for Vue 2 and 3 built on top of perfect-freehand.
Demo: https://wobsoriano.github.io/v-perfect-signature
yarn add v-perfect-signature
<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>
| 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 |
| 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.
| Name | Type | Default | Description |
|---|---|---|---|
onBegin |
Function | - | Fired when stroke begin |
onEnd |
Function | - | Fired when stroke end |
- 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
MIT - Copyright (c) 2021 Robert Soriano