CANVAS实现签名生成图片_weixin_33805743的博客

<template>
  <div>
    <canvas class="canvasSign" id="canvasSign" @touchstart="touchStart($event)"
     @touchend="touchEnd($event)" @touchmove="touchMove($event)">您的浏览器不支持canvas</canvas>
    <div class="signDoBtn">
      <div class="op_btn" @click="proDraw">确定</div>
      <div class="op_btn" @click="clearDraw">清除</div>
      <div class="op_btn" @click="cancelDraw">取消</div>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default {
    data () {
      return {
        canvasWidth: 0,
        strokeColor: 'black', /* 填充颜色 */
        LastLoc: {x: 0, y: 0}, /* 记录最后的移动坐标 */
        LastTime: 0,
        LastLineWidth: 5, /* 记录线宽 */
        canvasHeight: 0,
        isMouseDown: false, /* 是否按下鼠标 */
        targetEle: null, /* canvas元素 */
        context: null,
        maxLineWidth: 20, /* 最大线宽 */
        minLineWidth: 1, /* 最小线宽 */
        maxStrokeV: 10,
        minStrokeV: 0.1,
        touch: {x: 0, y: 0}
      }
    },
    methods: {
      optimizedMove () {},
      cancelDraw () {
        this.$emit('getimg');
      },
      clearDraw () { /* 清空已经绘制的图形 */
        this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
        this.clearDrawDone();
      },
      proDraw () { /* 返回base64编码 */
        let a = this.targetEle.toDataURL('image/png');
        this.$emit('getimg', a);
      },
      clearDrawDone () { /* 清除图形的方法 */
        this.context.save();
        this.context.restore();
      },
      begainStroke (point) { /* 开始绘制 */
        this.isMouseDown = true;
        let p = this.getPointFun(this.touch.x, this.touch.y);
        this.LastLoc.x = p.x;
        this.LastLoc.y = p.y;
        this.LastTime = new Date().getTime(); // 返回当前时间戳
      },
      tabMouseDown () { /* 根据是否触摸改变状态 */
        this.isMouseDown = false;
      },
      moveStroke (point) {
        let curLoc = this.getPointFun(point.x, point.y); // 得到当前鼠标点击的坐标
        let curTime = new Date().getTime();
        // draw
        this.context.beginPath();
        this.context.moveTo(this.LastLoc.x, this.LastLoc.y);
        this.context.lineTo(curLoc.x, curLoc.y);
        this.context.lineWidth = this.LastLineWidth;
        this.context.lineCap = 'round';
        this.context.lineJoin = 'round';
        this.context.strokeStyle = this.strokeColor;
        this.context.closePath();
        this.context.stroke();
        this.LastLoc.x = curLoc.x;
        this.LastLoc.y = curLoc.y;
        this.LastTime = curTime;
      },
      setTouch (o) {
        this.touch.x = o.clientX;
        this.touch.y = o.clientY;
      },
      touchStart (e) {
        e.preventDefault();
        this.setTouch(e.touches[0]); // 防止多点触控，以第0个触控为准
        this.begainStroke();
      },
      touchMove (e) {
        e.preventDefault();
        if (this.isMouseDown) {
          this.setTouch(e.touches[0]); // 防止多点触控，以第0个触控为准
          this.optimizedMove({x: this.touch.x, y: this.touch.y});
        }
      },
      touchEnd (e) {
        e.preventDefault();
        this.tabMouseDown();
      },
      getPointFun (x, y) { /* 计算坐标 */
        let bbox = this.targetEle.getBoundingClientRect(); // 拿到canvas的包围盒
        let a = (Number(x) - Number(bbox.left)) + 0.5;
        let b = (Number(y) - Number(bbox.top)) + 0.5;
        return {x: a, y: b};
      }
    },
    created: function () {
      let _this = this;
      this.$nextTick(function () {
        _this.canvasWidth = Math.min(700, window.innerWidth);
        _this.canvasHeight = _this.canvasWidth;
        _this.targetEle = document.getElementById('canvasSign');
        _this.context = _this.targetEle.getContext('2d');
        _this.targetEle.width = _this.canvasWidth;
        _this.targetEle.height = _this.canvasHeight;

        let requestAnimationFrame = window.requestAnimationFrame; /* 如果支持 requestAnimationFrame 则使用该方法 */
        _this.optimizedMove = requestAnimationFrame ? function (point) {
          requestAnimationFrame(function () {
            _this.moveStroke(point);
          });
        } : _this.moveStroke;
      });
    }
  }
</script>
<style lang="scss">
  .canvasSign{
    display:block;
    margin:0 auto;
    width: 100%;
    background-color: #f4f4f4;
  }
  .signDoBtn{text-align:center;}
  .signDoBtn div{
    display: inline-block;
    margin:10px 0 0 10px;
    border:1px solid #aaa;
    width:60px;
    height: 30px;
    line-height: 30px;
    font-size:16px;
    border-radius: 5px 5px;
    cursor:pointer;
    background:#fff;
    font-weight: normal;
    background-color: #f2f2f2;
  }
</style><templa