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.