vue签字板

安装相关插件

cnpm i vue-esign --save

全局引入

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

在弹窗里面添加

<el-dialog
  width="60%"
  title="签字"
  :visible.sync="innerVisible"
  append-to-body
  :before-close="handleClose1"
  :close-on-click-modal="false"
>
  <vue-esign
    style="border: solid 1px #000"
    ref="esign"
    :width="1200"
    :height="600"
    :isCrop="isCrop"
    :lineColor="lineColor"
  />
  <span slot="footer" class="dialog-footer">
    <button @click="handleClose1" type="button">
      <span>关 闭</span>
    </button>

    <button @click="handleGenerate()" type="button">
      <span>确 定</span>
    </button>
    <button @click="handleReset()" type="button">
      <span>清 空</span>
    </button>
  </span>
</el-dialog>


<img :src="imgimg" alt="" />    // 签完字直接显示

<img v-if="resultImg != null" :src="src + resultImg" alt=""/>  // 后台返回显示 先上传再调用

相关变量

  innerVisible: false,
  lineColor: "#000",
  isCrop: false,
  resultImg: null,
  imgimg: null,

相关方法

// 关闭签字板
handleClose1() {
  this.innerVisible = false;
  this.handleReset();
},
// 签字确定按钮
handleGenerate() {
  this.$refs["esign"]
    .generate()
    .then((res) => {
      // this.imgimg = res; // 用来直接显示
      this.imgimg = this.base64ImgtoFile(res);
      this.resultImg = res; // 得到了签字生成的base64图片
      this.innerVisible = false;
      const formData = new FormData();
      formData.append("file", this.imgimg);   // 将图片以64传过去
      uploadImages(formData)  // 上传方法
        .then((res) => {
          this.resultImg = res.fileName.uploadPath;
          this.fileName = res.fileName;
        })
        .catch((err) => {});
      this.handleReset();
    })
    .catch((err) => {
      //  没有签名，点击生成图片时调用
      this.$message({
        message: err + " 未签名！",
        type: "warning",
      });
    });
},
// 清空签字版
handleReset() {
  this.$refs["esign"].reset(); //清空画布
},



// 图片转化
base64ImgtoFile(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);
  }
  return new File([u8arr], `${filename}.${suffix}`, {
    type: mime,
  });
},