使用vue-esgin来实现电子签名

实现效果如下

 第一步：安装vue-esgin插件

npm i vue-esign --save

yarn add vue-esign --save

第二步在需要使用的vue页面中引入

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

完整代码如下

<template>
  <div style="margintop:30px;">
    <div>
      <vue-esign style="border: 1px solid #ddd;" ref="esign" :isClearBgColor="isClearBgColor" />
      <button @click="handleReset">清空画板</button>
      <button @click="handleGenerate">生成图片</button>
    </div>

    <div>
      <img style="float:left;" :src="resultImg" alt="">
    </div>

  </div>
</template>
<script>
import Vue from "vue"
import vueEsign from 'vue-esign'
Vue.use(vueEsign)

export default {
  data () {
    return {
      canWidth: 800,//画布宽度--是不会超出父元素的宽度的--设置也不行
      canHeight: 300,
      lineWidth: 3,//画笔粗细
      lineColor: '#000000',//画笔颜色
      bgColor: '#ffffff',//画布背景
      isCrop: false,//是否裁剪
      isClearBgColor: true,//是否清空背景色
      resultImg: '',//生成签名图片-base64
    }
  },
  methods: {
    handleReset () {
      // console.log(this.$refs.esign.$el)
      // console.log(this.$refs.esign)
      this.$refs.esign.reset()//清空画布内容
      this.lineWidth = 3
      this.lineColor = '#000000'
      this.bgColor = '#ffffff'
      this.isCrop = false
      this.resultImg = ''
    },
    handleGenerate () {
      this.$refs.esign.generate().then(res => {  //使用generate将签名导出为图片
        console.log('图片的base64地址', res)
        console.log(this.$refs.esign)
        this.resultImg = res
      }).catch(err => {
        console.log('画布没有签字时', err)
        alert('请先完成签字！') // 画布没有签字时会执行这里 'Not Signned'
      })
    }
  }

}
</script>

<style>
</style>

代码详解

1.必须设置 ref ，用来调用组件的两个内置方法，清空画布 reset() 和 导出图片generate()

在定义的方法中使用this.$refs.自定义名.reset() 来清空画布

或者使用 this.$refs.自定义名.generate()来将内容导出为img图片
2.画布默认是宽高800*300，且宽度是不会超过父元素的宽度的