Creating Signature Canvas in Vue Js

Photo by Signature Pro on Unsplash

Hellow guys! today i will share to you to create a signature canvas pad in vue js application. For add signature canvas i will use one package called vu3-signature, you can see the repository at here.

GitHub - WangShayne/vue3-signature: Electronic signature for Vue3

So for use this package you need to install it first.

// for vue 3
npm install vue3-signature

for vue 2
npm install vue-signature

After installation we can register the plugin into our app, in my case i use vue 3 with vite so i can register the plugin inside my src/main.js .

import './assets/main.css'
// import the component
import Vue3Signature from "vue3-signature"

import { createApp } from 'vue'
import App from './App.vue'

// use component globally
createApp(App).use(Vue3Signature).mount('#app')

If you use vue 2 you can register the component locally in your options api script like this.

<script>
import vueSignature from "vue-signature";
export default {
  name: "app",
  components: {
    vueSignature
  },
};
</script>

Vue3Signature already registered globally, after that we can use this component into our pages.

// vue 2
<vueSignature ref="signature" :w="'800px'" :h="'400px'"></vueSignature>

// vue 3
<Vue3Signature ref="signature" :sigOption="state.option" :w="'800px'" :h="'400px'"></Vue3Signature>

// use sigOption props for configuring pen and canvas color
<script setup>
import { ref } from "vue"

const options = ref({
    penColor: "rgb(0, 0, 0)",
    backgroundColor: "rgb(255,255,255)"
})
</script>

Next we will use siganture refs for perform available methods which this package provided.

There are 6 methods which this package provide,first we can undo the change in canvas with undo() method.

<Vue3Signature ref="signature" :sigOption="state.option" :w="'800px'" :h="'400px'"></Vue3Signature>
<button @click="undo">Undo</button>

<script setup>
const undo = () => {
  signature.value.undo();
}
</script>

Use clear() for clear the canvas from any signature or image.

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

Use save() for get the base64 encoded image, this method accept 3 string paramater for the type of the image default is png , image/jpeg , image/svg+xml .

const save = () => {
  console.log(signature.value.save("image/jpeg"))
}

// data:image/jpeg;base64,/9j/4AA......

Use addWaterMark() for add text watermark into your canvas.

const addWaterMark = () => {
  signature.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
  });
}

Use fromDataURL() if you want the signature canvas can to be edited and load the signature from your server in its still can to edit.

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

If you want read only you can combine with disabled props set it to true.