A Vue 3 based smooth signature drawing component.
npm install @selemondev/vue3-signature-pad
<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>
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 |
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. |
-
Vue 3 Signature - Vue 3 Signature Pad is an enhanced version of Vue 3 Signature with type safety and more options.