Vue 3 Signature Pad

A Vue 3 based smooth signature drawing component.

Installation

npm install @selemondev/vue3-signature-pad

Usage

<script setup lang="ts">
import { VueSignaturePad } from "@selemondev/vue3-signature-pad"
import { onMounted, ref } from "vue";

const state = ref({
  options: {
    penColor: 'rgb(0, 0, 0)',
    backgroundColor: 'rgb(255, 255, 255)'
  },
  disabled: false,
})

const colors = [
  {
    color: 'rgb(51, 133, 255)'
  },

  {
    color: 'rgb(85, 255, 51)'
  },

  {
    color: 'rgb(255, 85, 51)'
  }
];

const activeColor = ref();

const signature = ref();

const handleSave = (t: string) => {
  return console.log(signature.value.undo())
};
const handleClear = (t: string) => {
  return signature.value.clearCanvas()
};
const handleUndo = (t: string) => {
  return signature.value.undo()
};

const handleDisabled = () => {
    return state.disabled = !state.disabled;
};

const handleFromDataURL = (url: string) => {
  return signature.value.fromDataURL(url);
};

const handleAddWaterMark = () => {
    return signature1.value.addWaterMark({
    text: "Selemondev",          // watermark text, > default ''
    font: "20px Arial",         // mark font, > default '20px sans-serif'
    style: 'all',               // fillText and strokeText,  'all'/'stroke'/'fill', > default 'fill
    fillStyle: "red",           // fillcolor, > default '#333'
    strokeStyle: "blue",      // strokecolor, > default '#333'
    x: 100,                     // fill positionX, > default 20
    y: 200,                     // fill positionY, > default 20
    sx: 100,                    // stroke positionX, > default 40
    sy: 200                     // stroke positionY, > default 40
  });
}
</script>

<template>
  <div class="grid place-items-center w-full min-h-screen">
    <div class="flex flex-col items-center space-y-4">
      <div class="bg-gray-100 p-6">
        <VueSignaturePad ref="signature" height="400px" width="1280px" :maxWidth="2" :minWidth="2"
        :disabled="state.disabled"
          :options="{
            penColor: state.options.penColor, backgroundColor: state.options.backgroundColor
          }" />
      </div>

      <button type="button" @click="handleSave('image/jpeg')">Save</button>
       <button type="button" @click="handleClear">Clear</button>
       <button type="button" @click="handleUndo">Undo</button>
       <button type="button" @click="handleDisabled">Disabled</button>
       <button type="button" @click="handleFromDataURL('https://github.com/selemondev.png')">
       FronData URL
       </button>
       <button type="button" @click="handleAddWaterMark">Add watermark</button>
    </div>
  </div>
</template>

Props

name	type	default	description
option	Object	{penColor:"rgb(0, 0, 0)", backgroundColor:"rgb(255,255,255)"}	penColor and backgroundColor
width	String	"100%"	Pad width
height	String	"100%"	Pad height
throttle	Number	16	Draw the next point at most once per every x milliseconds
maxWidth	Number	2	Maximum thickness of the pen line
minWidth	Number	2	Minimum thickness of the pen line
clearOnResize	Boolean	false	Clear canvas on window resize
waterMark	Object	{}	Add addWaterMark
disabled	Boolean	false	Disable canvas
defaultUrl	String	""	Show image by default

Events

name	params	description
saveSignature	format (() / image/jpeg / image/svg)	Save image as PNG/JPEG or SVG
clearCanvas		Clear canvas
isCanvasEmpty		Returns true if the canvas is empty, otherwise it returns false
undo		Remove the last drawing
addWaterMark	{}	Add waterMark
fromDataURL	(url)	Draw signature image from data URL.
handleBeginStroke		Emits Signature started when the user starts drawing on the canvas.
handleEndStroke		Emits Signature ended when the user stops drawing on the canvas.
handleBeforeUpdateStroke		Emits Signature before update before the drawing gets updated on the canvas.
handleAfterUpdateStroke		Emits Signature after update after the drawing gets updated on the canvas.

Credits go to these amazing projects

• Signature Pad

• Vue 3 Signature - Vue 3 Signature Pad is an enhanced version of Vue 3 Signature with type safety and more options.