移动端签名

手签代码

<template>
  <div id="app">
    <div class="header">
      <van-icon name="arrow-left" size="30" @click="goback" />
      <span>签名</span>
    </div>
    <div class="bodysubject">
      <div class="hello">
        <div id="canvas"></div>
        <div class="control">
          <p @click="handelClearEl()">清除</p>
          <p @click="handelSaveEl()">保存</p>
          <p @click="handelThickness()">粗细</p>
          <p @click="handelColour()">颜色</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let canvas = document.createElement("canvas");
let cxt = canvas.getContext("2d");
export default {
  data() {
    return {
      linewidth: 1, //线条粗细，选填
      color: "black", //线条颜色，选填
      background: "#fff", //线条背景，选填
      imgsrc: "",
      staffId: ""
    };
  },

  methods: {
    goback() {
      this.$router.go(-1);
    },
    getCanvas() {
      let el = document.getElementById("canvas");
      el.appendChild(canvas);
      canvas.width = el.clientWidth;
      canvas.height = el.clientHeight;
      cxt.fillStyle = this.background; //填充绘图的背景颜色
      cxt.fillRect(0, 0, canvas.width, canvas.height); //绘制“已填色”的矩形
      cxt.strokeStyle = this.color; //笔触的颜色
      cxt.lineCap = "round"; //线条末端线帽的样式
      let linewidth = this.linewidth;
      //开始绘制
      canvas.addEventListener(
        "touchstart",
        function(e) {
          e.preventDefault();
          cxt.beginPath();
          cxt.lineWidth = linewidth; //当前线条的宽度，以像素计
          cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY - 50);
        }.bind(this),
        false
      );
      //绘制中
      canvas.addEventListener(
        "touchmove",
        function(e) {
          cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY - 50);
          cxt.stroke();
        }.bind(this),
        false
      );
      //结束绘制
      canvas.addEventListener(
        "touchend",
        function() {
          cxt.closePath();
        }.bind(this),
        false
      );
    },
    handelColour() {
      this.color = "red";
      this.getCanvas();
    },
    handelThickness() {
      this.linewidth = 5;
      this.getCanvas();
    },
    handelClearEl() {
      this.linewidth = 1;
      this.color = "black";
      cxt.clearRect(0, 0, canvas.width, canvas.height);
      this.getCanvas();
    },
    async handelSaveEl() {
      this.staffId = JSON.parse(sessionStorage.getItem("messagedata")).staffId;
      let imgBase64 = canvas.toDataURL();
      this.imgsrc = imgBase64;
      sessionStorage.setItem("imgBase", this.imgsrc);

      let value = JSON.parse(sessionStorage.getItem("messagedata"));
      value.signature = imgBase64;
      sessionStorage.setItem("messagedata", JSON.stringify(value));
      const { data } = await this.axios.post(`/app/common/uploadSignature`, {
        signatureData: imgBase64,
        staffId: this.staffId
      });
      this.$router.go(-1);
    }
  },

  created() {},
  mounted() {
    this.getCanvas();
  }
};
</script>

<style lang='less' scoped>
@w: 75;
.hello {
  width: 100%;
  height: 800rem / @w;
}
#canvas {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
}
#canvas canvas {
  display: block;
}
.control {
  display: flex;
  margin-top: 20rem / @w;
  justify-content: space-between;

  p {
    border: 1px solid blue;
    padding: 10rem / @w;
    font-size: 35rem / @w;
    border-radius: 10rem / @w;
    color: #fff;
    background-color: #1381fe;
  }
}
</style>