如何使用vue实现手写签名功能

本篇内容介绍了“如何使用Vue实现手写签名功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

 个人实现截图：

安装：

npm install vue-esign --save

使用：

在main.js中引入

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

 2.在页面中引用

<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bGColor.sync="bgColor" /> <button @click="handleReset">清空画板</button> <button @click="handleGenerate">生成图片</button>

说明

期待已久,上原码:

data () {  return {    lineWidth: 6,    lineColor: '#000000',    bgColor: '',    resultImg: '',    isCrop: false  }},methods: {  handleReset () {    this.$refs['esign'].reset() //清空画布  },  handleGenerate () {    this.$refs['esign'].generate().then(res => {      this.resultImg = res // 得到了签字生成的base64图片    }).catch(err => { //  没有签名，点击生成图片时调用      this.$message({        message: err + ' 未签名！',        type: 'warning'      })      alert(err) // 画布没有签字时会执行这里 'Not Signned'    })  }}

附：将base64转化成图片方法：

// 将base64，转换成图片 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 }) },

“如何使用vue实现手写签名功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！