Vue3-signature

An electronic signature component by Vue3.js

img1

Usage

npm install vue3-signature

main.js

import Vue3Signature from "vue3-signature"

createApp(App).use(Vue3Signature).mount("#app")

Example

<template>

  <Vue3Signature  ref="signature1" :sigOption="state.option" :w="'1280px'" :h="'400px'"
                 :disabled="state.disabled" class="example"></Vue3Signature>
  <button @click="save('image/jpeg')">Save</button>
  <button @click="clear">Clear</button>
  <button @click="undo">Undo</button>
  <button @click="addWaterMark">addWaterMark</button>
  <button @click="fromDataURL">fromDataURL</button>
  <button @click="handleDisabled">disabled</button>

</template>

<script setup>
import {reactive, ref} from 'vue'

const state = reactive({
  count: 0,
  option: {
    penColor: "rgb(0, 0, 0)",
    backgroundColor: "rgb(255,255,255)"
  },
  disabled: false
})

const signature1 = ref(null)

const save = (t) => {
  console.log(signature1.value.save(t))
}

const clear = () => {
  signature1.value.clear()
}

const undo = () => {
  signature1.value.undo();
}

const addWaterMark = () => {
  signature1.value.addWaterMark({
    text: "mark text",          // 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
  });
}

const fromDataURL = (url) => {
  signature1.value.fromDataURL("https://avatars2.githubusercontent.com/u/17644818?s=460&v=4");
}

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

</script>

<style scoped>
.example{
  margin: 0 auto;
}
</style>

Props

  • sigOption (Object, default: {penColor:"rgb(0, 0, 0)", backgroundColor:"rgb(255,255,255)"}): Contains properties for penColor and backgroundColor.
  • w (String, default: "100%"): Width of the parent container (must include units, e.g., "100px" or "100%").
  • h (String, default: "100%"): Height of the parent container (must include units, e.g., "100px" or "100%").
  • clearOnResize (Boolean, default: false): Determines if the canvas is cleared when the window is resized.
  • waterMark (Object, default: {}): Configuration for watermark (refer to Usage addWaterMark).
  • disabled (Boolean, default: false): Disables the canvas if set to true.
  • defaultUrl (String, default: ""): URL of the image to be displayed by default.

Methods

  • save ((), "image/jpeg", "image/svg+xml"): Saves the image as PNG, JPEG, or SVG.
  • clear: Clears the canvas.
  • isEmpty: Returns true if the canvas is empty, otherwise returns false.
  • undo: Removes the last dot or line.
  • addWaterMark ({} // check Usage addWaterMark): Adds a watermark.
  • fromDataURL (url): Draws a signature image from a data URL.

View Github