移动端 实现在用户合同中手写签名

canvas画布保存得到图片（Base64码）

<template>
  <div align="center">
    <canvas
      id="myCanvas"
      width="500"
      height="500"
      style="border: 1px solid #6699cc"
    ></canvas>
    <div class="control-ops control">
      <button type="button" class="btn btn-primary" @click="clearArea()">
        清空画板
      </button>
      <button type="button" class="saveimg" @click="saveImageInfo()">
        保存
      </button>
    </div>
    <div class="saveimgs"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mousePressed: false,
      lastX: 0,
      lastY: 0,
      ctx: null,
      c: null,
      control: null,
      saveimgs: null,
      selected1: null,
      selected2: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    InitThis() {
      var _this = this;
      //          触摸屏
      this.c.addEventListener(
        "touchstart",
        function (event) {
          console.log(1, this);
          if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，重要
            var touch = event.targetTouches[0];
            _this.mousePressed = true;
            _this.Draw(
              touch.pageX - this.offsetLeft,
              touch.pageY - this.offsetTop,
              false
            );
          }
        },
        false
      );

      this.c.addEventListener(
        "touchmove",
        function (event) {
          console.log(2);
          if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，重要
            var touch = event.targetTouches[0];
            if (_this.mousePressed) {
              _this.Draw(
                touch.pageX - this.offsetLeft,
                touch.pageY - this.offsetTop,
                true
              );
            }
          }
        },
        false
      );

      this.c.addEventListener(
        "touchend",
        function (event) {
          console.log(3);
          if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
            //                  var touch = event.targetTouches[0];
            _this.mousePressed = false;
          }
        },
        false
      );
      /*c.addEventListener('touchcancel', function (event) {
                console.log(4)
                mousePressed = false;
            },false);*/

      //         鼠标
      this.c.onmousedown = function (event) {
        _this.mousePressed = true;
        _this.Draw(
          event.pageX - this.offsetLeft,
          event.pageY - this.offsetTop,
          false
        );
      };

      this.c.onmousemove = function (event) {
        if (_this.mousePressed) {
          _this.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 = this.selected2;
        // this.ctx.lineWidth = this.selected1;
        this.ctx.lineJoin = "round";
        this.ctx.moveTo(this.lastX, this.lastY);
        this.ctx.lineTo(x, y);
        this.ctx.closePath();
        this.ctx.stroke();
      }
      this.lastX = x;
      this.lastY = y;
    },
    // 清空画板
    clearArea() {
      // Use the identity matrix while clearing the canvas
      this.ctx.setTransform(1, 0, 0, 1, 0, 0);
      this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);

      // 清除签名图片
      if (this.saveimgs.getElementsByTagName("span").length >= 1) {
        var clearImg = this.saveimgs.getElementsByTagName("span")[0];
        this.saveimgs.removeChild(clearImg);
      }
    },
    saveImageInfo() {
      var image = this.c.toDataURL("image/png");// 图片Base64码
      var ctximg = document.createElement("span");
      ctximg.innerHTML = "<img src='" + image + "' alt='from canvas'/>";
      if (this.saveimgs.getElementsByTagName("span").length >= 1) {
        var span_old = this.saveimgs.getElementsByTagName("span")[0];
        this.saveimgs.replaceChild(ctximg, span_old);
      } else {
        this.saveimgs.appendChild(ctximg);
      }
      //          console.log(image)
    },
    init() {
      this.ctx = document.getElementById("myCanvas").getContext("2d");
      this.c = document.getElementById("myCanvas");

      this.control = document.getElementsByClassName("control")[0];
      this.saveimgs = document.getElementsByClassName("saveimgs")[0];
      this.InitThis();
    },
  },
};
</script>

<style>
.saveimg {
  text-align: center;
}

.saveimgs span {
  display: inline-block;
  margin-top: 5px;
}
</style>