Vue电子签名插件vue-esign

1. 插件安装

npm install vue-esign --save

2. main.js全局引入

// vue2
//main.js中引入：
import vueEsign from 'vue-esign'
Vue.use(vueEsign)

局部引入

// 局部
import vueEsign from 'vue-esign'
components: { vueEsign }

3.页面上使用

必须设置 ref ，用来调用组件的两个内置方法 reset() 和 generate()
无需给组件设置 style 的宽高，如果画布的 width属性值没超出父元素的样式宽度，则该组件的样式宽度就是画布宽度，超出的话，组件样式宽度则是父元素的100%；所以只需设置好父元素的宽度即可；

<vue-esign
        ref="esign"
        style="border: 1px dashed #c2c1c1;"
        :height="700"
        :isCrop="isCrop"
        :lineWidth="lineWidth"
        :lineColor="lineColor"
        :bgColor.sync="bgColor"
      />
      <div class="control-sign">
         <button @click="handleReset">清空画板</button> 
         <button @click="handleGenerate">生成图片</button>
      </div>

属性	类型	默认值	说明
width	Number	800	画布宽度，即导出图片的宽度
height	Number	300	画布高度，即导出图片的高度
lineWidth	4	Number	画笔粗细
lineColor	String	#000000	画笔颜色
bgColor	String	空	画布背景色，为空时画布背景透明，支持多种格式 '#ccc'，'#E5A1A1'，'rgb(229, 161, 161)'，'rgba(0,0,0,.6)'，'red'
isCrop	Boolean	false	是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
isClearBgColor	Boolean	true	清空画布时(reset)是否同时清空设置的背景色(bgColor)

清空画布

this.$refs.esign.reset()

生成图片

this.$refs.esign.generate().then(res => {
  console.log(res) // base64图片
}).catch(err => {
  alert(err) // 画布没有签字时会执行这里 'Not Signned'
})

图片base64转文件

 //将图片base64转换为文件
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),// window.atob() 方法用于解码使用 base-64 编码的字符串。
        n = bstr.length,
        // Uint8Array数组类型表示一个 8 位无符号整型数组，创建时内容被初始化为 0。
        // 创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。
        // new Uint8Array(length); // 创建初始化为 0 的，包含 length 个元素的无符号整型数组
        u8arr = new Uint8Array(n);
      while (n--) {
      // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    }

<template>
  <div>
    <el-card class="qianming-container" body-style="padding:0px">
      <vue-esign
        ref="esign"
        :isCrop="isCrop"
        :width="600"
        :height="300"
        :lineWidth="lineWidth"
        :lineColor="lineColor"
        :bgColor.sync="bgColor"
      ></vue-esign>
      <div class="contro-container">
        <el-button type="danger" @click="handleReset">清空画板</el-button>
        <el-button type="primary" @click="handleGenerate">生成图片</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
//局部引入电子签名：
import vueEsign from "vue-esign";
export default {
  name: "Esign",
  components: {
    vueEsign
  },
  data() {
    return {
      lineWidth: 6,
      lineColor: "#000000",
      bgColor: "",
      resultImg: "",
      isCrop: false
    };
  },
  methods: {
    //清空画板..
    handleReset() {
      this.$refs.esign.reset();
      this.resultImg = "";
    },
    //生成签名图片..
    handleGenerate() {
      this.$refs.esign.generate().then(res => {
        let fileName = "img1.png";
        let file = this.dataURLtoFile(res, fileName);
        console.log("file", file);
      });
    },
    //将图片base64转换为文件
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    }
  }
};
</script>
<style scoped>
button {
  height: 40px;
}
.contro-container {
  width: 600px;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: #d3d3d3;
  position: absolute;
  bottom: 0px;
}
.qianming-container {
  width: 600px;
  height: 350px;
  /* margin: 20px auto; */
  position: relative;
}
.box-card {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 20px;
}
</style>