vue利用canvas自定义手写签名

1.利用vue第三方vue-esign

npm install vue-esign --save

2.在入口文件main.js中引入

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

3.html代码

 <div class="pupu_box">
        <div class="desc_txt">
          <span>注：注:个人签名要求字迹工整、清晰规范、易于识别，杜绝过于艺术化的签名。</span>
        </div>
        <h2>签名区</h2>
        <div class="cavas_box">
          <vue-esign
            ref="esign"
            style="width: 94%;margin:auto;border-radius:6px"
            :height="canHeight"
            :isCrop="isCrop"
            :lineWidth="lineWidth"
            :lineColor="lineColor"
            :bgColor.sync="bgColor"
          />
        </div>
        <div class="bot_box">
          <div @click="handleReset">重新写</div>
          <div @click="handleGenerate">确认</div>
        </div>
        <img
        :style="{'width':imgWidth+'px','height':imgHeight+'px'}"
        :src="simgImg"
        alt
      />
    </div>

4.js代码

data() {//vue中的data中写入
    return {
      simgImg: "", //签名图片
      imgWidth: window.screen.width - window.screen.width * 0.1 - 20,//计算签名图片的宽
      imgHeight:
        ((window.screen.width - window.screen.width * 0.1 - 20) / 5) * 2,//计算签名图片的高，宽高比例为5:2
      boxHeight:
        ((window.screen.width - window.screen.width * 0.1 - 20) / 5) * 2 + 20,
      istile: true,
      isShow: false,
      lineWidth: 2,
      lineColor: "#000000",
      bgColor: "#fff",
      resultImg: "",
      isCrop: true,
      canHeight: window.screen.height - window.screen.height * 0.66 - 20,
    };

5.methods函数方法

handleReset() {
      this.$refs.esign.reset(); //清空画布
    },
handleGenerate() {
      this.$refs.esign
        .generate()
        .then((res) => {
          this.resultImg = res; //生成图片，这里生成的是base64格式
        })
        .catch((err) => {
          alert(err); // 画布没有签字时会执行这里 'Not Signned'
        });
    },

6.预览图

7.注意base64位的图片如果要上传到后台需要做处理

// 将base64转换成file文件流  dataurl是你需要转换的base64的图片
    basetyprfile(dataurl, filename = "file") {
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let suffix = mime.split("/")[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      let file = new File([u8arr], `${filename}.${suffix}`, { type: mime });
      this.Uploader(file);//上传图片的接口
    },
    Uploader(file) {
      var content = file;
      var data = new FormData();
      data.append("file", content);
      this.$axios({
        url: home.upload,
        method: "POST",
        data: data,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then((res) => {
        if (res.code == 1) {
          console.log(res.data);
        }
      });
    },