vant点击弹出手写签字并转文件流上传组件

vant点击弹出手写签字并转文件流上传组件

实现效果：

点击签名按钮


实现预览效果

组件代码：

<div class="content">
    <div style="display: flex; margin-top: 10px">
      <div
        style="
          color: #646566;
          font-size: 14px;
          margin-left: 16px;
          margin-right: 50px;
        "
      >
        签名：
      </div>
      <img
        v-if="imagesrc"
        style="width: 100px; height: 100px"
        :src="imagesrc"
      />
    </div>

    <div class="changeBtn" style="margin: 16px" @click="openSign">
      <van-button size="large" type="info " native-type="submit"
        >签名</van-button
      >
    </div>
    <van-popup v-model="showSign" position="top">
      <div class="page sign-page">
        <div class="content1">
          <div class="sign-wrap" id="signWrap">
            <canvas id="myCanvas" width="100%" height="300"></canvas>
          </div>
        </div>
        <div class="con-btn">
          <span class="staging-btn" @click="clear()">清除</span>
          <span class="submit-btn" @click="confirm()">确认</span>
        </div>
      </div>
    </van-popup>
  </div>

export default {
  name: "sign",
  data() {
    return {
      image: "",
      mousePressed: false,
      c: "",
      ctx: "",
      lastX: 0,
      lastY: 0,
      showSign: false,
      imagesrc: "",
    };
  },
  methods: {
    openSign() {
      this.showSign = true;
      setTimeout(() => {
        this.$nextTick(() => {
          this.InitThis();
        });
      }, 1000);
    },
    InitThis() {
      this.image = "";
      this.mousePressed = false;
      var lastX, lastY;
      this.ctx = document.getElementById("myCanvas").getContext("2d");
      this.c = document.getElementById("myCanvas");
      var signWrap = document.getElementById("signWrap");
      this.c.width = signWrap.clientWidth; // 设置宽度
      this.c.height = signWrap.clientHeight; // 设置高度
      // 触摸屏
      var that = this;
      this.c.addEventListener(
        "touchstart",
        function (event) {
          if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，重要
            var touch = event.targetTouches[0];
            this.mousePressed = true;
            that.Draw(
              touch.pageX - this.offsetLeft,
              touch.pageY - this.offsetTop,
              false
            );
          }
        },
        false
      );
      this.c.addEventListener(
        "touchmove",
        function (event) {
          if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，重要
            var touch = event.targetTouches[0];
            if (this.mousePressed) {
              that.Draw(
                touch.pageX - this.offsetLeft,
                touch.pageY - this.offsetTop,
                true
              );
            }
          }
        },
        false
      );
      this.c.addEventListener(
        "touchend",
        function (event) {
          if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
            this.mousePressed = false;
          }
        },
        false
      );
      // 鼠标
      this.c.onmousedown = function (event) {
        this.mousePressed = true;
        that.Draw(
          event.pageX - this.offsetLeft,
          event.pageY - this.offsetTop,
          false
        );
      };
      this.c.onmousemove = function (event) {
        if (this.mousePressed) {
          that.Draw(
            event.pageX - this.offsetLeft,
            event.pageY - this.offsetTop,
            true
          );
        }
      };
      this.c.onmouseup = function (event) {
        this.mousePressed = false;
      };
    },
    Draw(x, y, isDown) {
      if (isDown) {
        this.ctx.beginPath();
        this.ctx.strokeStyle = "#000"; // 颜色
        this.ctx.lineWidth = 3; // 线宽
        this.ctx.lineJoin = "round";
        this.ctx.lineMax = 10; // 设置画笔最大线宽
        this.ctx.lineMin = 3; // 设置画笔最小线宽
        this.ctx.linePressure = 1.2; // 设置画笔笔触压力
        this.ctx.smoothness = 30; // 设置画笔笔触大小变化的平滑度
        this.ctx.moveTo(this.lastX, this.lastY);
        this.ctx.lineTo(x, y);
        this.ctx.closePath();
        this.ctx.stroke();
      }
      this.lastX = x;
      this.lastY = y;
    },
    // 清空画板
    clear() {
      this.ctx.setTransform(1, 0, 0, 1, 0, 0);
      this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
    },
    // 提交签名
    confirm() {
      this.checkEmpty(); // 调用 表单非空验证
    },
    checkEmpty() {
      var c = document.getElementById("myCanvas"); // 获取html的canvas对象，我这个id="myCanvas"
      if (this.isCanvasBlank(c)) {
        alert("请在签名区域签名后再次确认");
        return;
      } else {
        var image = this.c.toDataURL("image/png"); // 得到生成后的签名base64位  url 地址
        //将base64转为文件流 
        let test = this.getBase64URL(image);
        const forms = new FormData();
        forms.append("file", test); // 获取上传图片信息
        //上传接口
        upload(forms).then((res) => {
          if (res.code == 200) {
            this.showSign = false;
            this.imagesrc = this.baseUrl + res.fileName;
            this.$emit('change', res.fileName)
          }
        });
      }
    },
    getBase64URL(pic) {
      const blob = this.base64ImgtoFile(pic);
      return blob;
    },
    base64ImgtoFile(dataurl, filename = "file") {
      //将base64格式分割：['data:image/png;base64','XXXX']
      const arr = dataurl.split(",");
      // .*？ 表示匹配任意字符到下一个符合条件的字符 刚好匹配到：
      // image/png
      const mime = arr[0].match(/:(.*?);/)[1]; //image/png
      //[image,png] 获取图片类型后缀
      const suffix = mime.split("/")[1]; //png
      const bstr = atob(arr[1]); //atob() 方法用于解码使用 base-64 编码的字符串
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime,
      });
    },
    // 验证canvas画布是否为空函数
    isCanvasBlank(canvas) {
      var blank = document.createElement("canvas"); // 系统获取一个空canvas对象
      blank.width = canvas.width;
      blank.height = canvas.height;
      return canvas.toDataURL() == blank.toDataURL(); // 比较值相等则为空
    },
  },
};

.page {
  width: 100%;

  .content {
    width: 90%;
    //height: 1.7rem;
    background-size: 100% 100%;
    background: url(../assets/qm.png) no-repeat center center;

    .sign-wrap {
      width: 100%;
      height: 100%;
    }
  }

  .con-btn {
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: space-between;
    opacity: 0.75;

    span {
      font-size: 0.14rem;
      width: 100%;
      height: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .staging-btn {
      color: #4154ff;
      background: #fff;
    }

    .submit-btn {
      color: #fff;
      background: #4154ff;
    }
  }
}