vue-esign实现电子签名

1. 导入依赖

pnpm install vue-esign --save

2. sign.vue代码实现

<template>
  <div id="app">
    <div class="signMask" v-if="autographStatus">
      <div class="sigh-btns">
        <button class="btn" type="info" @click="handleCancel">取消</button>
        <button class="btn" type="danger" @click="handleReset">清空画板</button>
        <button class="btn" type="primary" @click="handleGenerate">
          确认签名
        </button>
      </div>
      <div class="sign-box">
        <div class="canvsborder">
          <vue-esign ref="esign" :width="400" :height="800" :isCrop="isCrop" :lineWidth="lineWidth"
            :lineColor="lineColor" :format="'image/png'" :bgColor="bgColor" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vueEsign from "vue-esign";
export default {
  data() {
    return {
      autographStatus: true, //todo false
      lineWidth: 6,
      lineColor: "#000000",
      resultImg: "",
      isCrop: false,
      bgColor: "#e9e8e8",
    };
  },
  components: {
    vueEsign,
  },
  methods: {
    //确认签名后展示签名画板 false->true
    agreeSign() {
      this.autographStatus = true;
    },
    handleCancel() {
      //todo 返回上一层
    },
    // 清空画布
    handleReset() {
      this.$refs.esign.reset();
    },
    // 生成签名的base64图片
    handleGenerate() {
      this.$refs.esign
        .generate()
        .then((res) => {
          this.imgSrc = res;
          console.log(res, this.base64ImgtoFile(res));
        })
        .catch((err) => {
          console.log(err, "画布没有签字！");
        });
    },
    // 附：base64转化成图片
    base64ImgtoFile(dataurl, fileName = "file") {
      const arr = dataurl.split(",");
      const mime = arr[0].match(/:(.*?);/)[1];
      const suffix = mime.split("/")[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], `${fileName}.${suffix}`, { type: mime });
    },
  },
};
</script>
<style scoped>
.signMask {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  flex-direction: row;
}

.sign-box,
.signMask {
  margin: auto;
  display: flex;
}

.sign-box {
  width: 80%;
  height: 90%;
  flex-direction: column;
  text-align: center;
}

.sigh-btns,
.sign-view {
  height: 100%;
}

.sigh-btns {
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.btn {
  height: 40px;
  padding: 8rpx 40rpx;
  font-size: 14px;
  transform: rotate(90deg);
  border: 1rpx solid grey;
}

.mycanvas {
  margin: auto 0rpx;
  background-color: #ececec;
}

.canvsborder {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

3.效果图