Vue vue-esign签字板

使用vue-esign让用户能够在手动签字并返回为base64或者file格式的文件流

安装

npm install vue-esign --save

在main.js中全局引用

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

Demo

<template>
  <div class="esigns">
    <vue-esign
      ref="esign"
      style="
        width: 100%;
        height: 400px
      "
      :isCrop="isCrop"
      :lineWidth="lineWidth"
      :lineColor="lineColor"
      :bgColor.sync="bgColor"
    />

    <div class="btn">
      <van-button type="primary" @click="handleReset">重置</van-button>
      <van-button type="info" @click="handleGenerate">确定</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Esign",
  data() {
    return {
      lineWidth: 6,
      lineColor: "#000000",
      bgColor: "",
      resultImg: "",
      isCrop: false,
    };
  },

  methods: {
    handleReset() {
      // 清除
      this.$refs.esign.reset();
    },

    handleGenerate() {
      // 获取base64
      var _this = this;
      _this.$refs.esign
        .generate()
        .then((res) => {
          // 转成文件
          var file = _this.dataURLtoFile(res);
            console.log("file:",file )
          //调用接口
          uploadFile(file).then(({ data }) => {
           console.log("data:",data)
          });
        })
        .catch((err) => {
          _this.$toast(err); 
        });
    },
    // 将base64转换为file
    dataURLtoFile(dataurl) {
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bytes = atob(arr[1]); // 解码base64
      let n = bytes.length;
      let ia = new Uint8Array(n);
      while (n--) {
        ia[n] = bytes.charCodeAt(n);
      }
      return new File([ia], "easign.jpg", { type: mime });
    },

  },
};
</script>

<style scoped>
.btn {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
</style>