当前位置:   article > 正文

vue-esign实现电子签名_vue-esign 电子签名

vue-esign 电子签名
  1. 导入依赖
pnpm install vue-esign --save
  • 1
  1. 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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134

3.效果图
在这里插入图片描述
在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/893574
推荐阅读
相关标签
  

闽ICP备14008679号