Use vue to implement handwritten signature function

Personal implementation screenshots:

Install:

npm install vue-esign --save

use:

1. Import in main.js

import vueEsign from 'vue-esign'
Vue.use(vueEsign)

2. Quote in the page

<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
 
<button @click="handleReset">Clear the drawing board</button>
 
<button @click="handleGenerate">Generate image</button>

3. Description

property	type	default value	illustrate
width	Number	800	Canvas width, that is, the width of the exported image
height	Number	300	Canvas height, i.e. the height of the exported image
lineWidth	4	Number	Brush Thickness
lineColor	String	#000000	Brush Color
bgColor	String	null	The canvas background color. When it is empty, the canvas background is transparent. Supports multiple formats '#ccc', '#E5A1A1', 'rgb(229, 161, 161)', 'rgba(0,0,0,.6)', 'red'
isCrop	Boolean	false	Whether to crop, based on the canvas setting size, cut off the blank area around it

Long awaited, here is the original code:

data () {
  return {
    lineWidth: 6,
    lineColor: '#000000',
    bgColor: '',
    resultImg: '',
    isCrop: false
  }
},
methods: {
  handleReset () {
    this.$refs['esign'].reset() //Clear the canvas},
  handleGenerate() {
    this.$refs['esign'].generate().then(res => {
      this.resultImg = res // Get the base64 image generated by the signature}).catch(err => { // No signature, call this.$message({
        message: err + ' Unsigned! ',
        type: 'warning'
      })
      alert(err) // This will be executed when the canvas is not signed'Not Signned'
    })
  }
}

Appendix : How to convert base64 into pictures:

// Convert base64 to image base64ImgtoFile(dataurl, filename = 'file') {
 
const arr = dataurl.split(',')
 
const mime = arr[0].match(/:(.*?);/)[1]
 
const suffix = mime.split('/')[1]
 
const bstr = atob(arr[1])
 
let n = bstr.length
 
const u8arr = new Uint8Array(n)
 
while (n--) {
 
u8arr[n] = bstr.charCodeAt(n)
 
}
 
return new File([u8arr], `${filename}.${suffix}`, {
 
type: mime
 
})
 
},

This is the end of this article about using vue to implement handwritten signature function. For more relevant vue implementation of handwritten signature content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: