vue项目通过插件vue-esign实现签名

html:

<template>  <div>    <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>    <img :src="https://juejin.cn/post/src" >  </div></template>
复制代码

src:

<script>export default {  data() {    return {      lineWidth: 6,      lineColor: "#000000",      bgColor: "",      resultImg: "",      isCrop: false,      src:''    };  },  methods: {    handleReset() {      this.$refs.esign.reset();    },    handleGenerate() {      var that=this      this.$refs.esign        .generate()        .then((res) => {          // console.log(res);          this.resultImg = res;          var arr = res.split(","),            mime = arr[0].match(/:(.*?);/)[1],            bstr = atob(arr[1]),            n = bstr.length,            u8arr = new Uint8Array(n);          while (n--) {            u8arr[n] = bstr.charCodeAt(n);          }          var files = new File([u8arr], "filename", { type: mime });//使用File()函数将base64转为文件流file          var fr = new FileReader();          fr.onload = function () {            that.src=this.result            console.log(this.result);//通过FileReader将base64转为文件流          };          fr.readAsDataURL(files);        })        .catch((err) => {          alert(err); // 画布没有签字时会执行这里 'Not Signned'        });    },  },};</script>
复制代码