[JavaScript知识库]vue使用canvas实现手写电子签名；vue使用vue-esign插件实现手写电子签名；H5使用画布签名

功能：
1.兼容 PC 和 Mobile；
2.画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标偏移）；
3.自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色；
4.支持裁剪 （针对需求：有的签字需要裁剪掉四周空白）。
5.导出图片格式为 base64；
6.原博地址,本文在原博基础修改，代码在博尾。

签名效果：

一、安装插件

npm install vue-esign --save

二、在.vue页面引入使用

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

三、注意事项

1.必须设置 ref ，用来调用组件的两个内置方法，清空画布 reset() 和 导出图片generate()
2.画布默认是宽高800*300，且宽度是不会超过父元素的宽度的

四、以下代码可直接复制（有效的话点赞支持一波吧）

<template>
  <div style="margintop:30px;">

    <div>
      <div style="margin-bottom:20px;">
        <span>画笔粗细：</span>
        <el-select style="width:100px;" v-model="lineWidth" placeholder="请选择">
          <el-option :label="1" :value="1"></el-option>
          <el-option :label="3" :value="3"></el-option>
          <el-option :label="6" :value="6"></el-option>
        </el-select>

        <span>画笔颜色：</span>
        <!-- input颜色回显必须要六位的颜色值 -->
        <input v-model="lineColor" type="color" placeholder="" placeholder-class="input-placeholder" />

        <span>画布背景：</span>
        <input v-model="bgColor" type="color" placeholder="" placeholder-class="input-placeholder" />

        <span>是否裁剪：</span>
        <input v-model="isCrop" type="checkbox" name="">

      </div>

      <vue-esign style="border: 1px solid #ddd;" ref="esign" :width="canWidth" :height="canHeight" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" :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 => {
        console.log('图片的base64地址', res)
        console.log(this.$refs.esign)
        this.resultImg = res
      }).catch(err => {
        console.log('画布没有签字时', err)
        alert('请先完成签字！') // 画布没有签字时会执行这里 'Not Signned'
      })
    }
  }

}
</script>

<style>
</style>