基於Vue的移動端電子簽名demo

HTML

<template>
<div ref="canvasBox">
     <canvas id="canvas" ref="canvas" height="150"></canvas>
</div>
<div class="row row-space-between">
  <button  @click="onClickCancle">取消</button>
  <button @click="clear">重籤</button>
  <button @click="save">確認</button>
</div>
<!-- <img :src="singImgUrl" alt /> -->
</template>

JS

<script>
var draw;

var preHandler = function(e) {
  e.preventDefault();
};

class Draw {
  constructor(el) {
    this.el = el;

    this.canvas = document.getElementById(this.el);

    this.cxt = this.canvas.getContext("2d");

    this.stage_info = canvas.getBoundingClientRect();

    this.path = {
      beginX: 0,

      beginY: 0,

      endX: 0,

      endY: 0
    };
  }

  init(btn) {
    var that = this;

    this.canvas.addEventListener("touchstart", function(event) {
      document.addEventListener("touchstart", preHandler, false);

      that.drawBegin(event);
    });

    this.canvas.addEventListener("touchend", function(event) {
      document.addEventListener("touchend", preHandler, false);

      that.drawEnd();
    });

    this.clear(btn);
  }

  drawBegin(e) {
    var that = this;

    window.getSelection()
      ? window.getSelection().removeAllRanges()
      : document.selection.empty();

    this.cxt.strokeStyle = "#BC4C2D";

    this.cxt.beginPath();

    this.cxt.moveTo(
      e.changedTouches[0].clientX - this.stage_info.left,

      e.changedTouches[0].clientY - this.stage_info.top
    );

    this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left;

    this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top;

    canvas.addEventListener("touchmove", function() {
      that.drawing(event);
    });
  }

  drawing(e) {
    this.cxt.lineTo(
      e.changedTouches[0].clientX - this.stage_info.left,

      e.changedTouches[0].clientY - this.stage_info.top
    );

    this.path.endX = e.changedTouches[0].clientX - this.stage_info.left;

    this.path.endY = e.changedTouches[0].clientY - this.stage_info.top;

    this.cxt.stroke();
  }

  drawEnd() {
    document.removeEventListener("touchstart", preHandler, false);

    document.removeEventListener("touchend", preHandler, false);

    document.removeEventListener("touchmove", preHandler, false);

    //canvas.ontouchmove = canvas.ontouchend = null
  }

  clear(btn) {
    this.base64Id = "";
    this.cxt.clearRect(0, 0, 500, 600);
  }

  save() {
    var blank = document.createElement("canvas"); //系統獲取一個空canvas對象
    blank.width = canvas.width;
    blank.height = canvas.height;
    let flag = canvas.toDataURL("image/png") == blank.toDataURL(); //比較值相等則爲空;
    if (flag) {
      return "0";
    } else {
      return canvas.toDataURL("image/png");
    }
  }
}
export default {
  data() {
    return {
      singImgUrl: ""
    };
  },
  methods: {
	 clear() {
        draw.clear();
        this.base64Id = "";
	 },
   	save() {
      var data = "";
      data = draw.save();
      if (data == "0") {
      		this.$toast("請先簽名再點擊確定哦~");
      } else {
	      this.singImgUrl = data;
	      ///data 就是得到的base64格式的簽名圖片，根據業務這裏可上傳到服務器
      }
      // 
    },
}，
 mounted() {
    this.base64Id = "";
    let _width = this.$refs.canvasBox.offsetWidth;
    this.$refs.canvas.width = _width; //適配移動端寬度給canvas
    draw = new Draw("canvas");
    draw.init();
  }
}
</script>

CSS 自行美化，相信大家都沒得問題^_

拿來即用，加油！