VUE使用canvas实现签名组件

本文实例为大家分享了VUE使用canvas实现签名组件的具体代码，供大家参考，具体内容如下

效果如下：

<template>
  <div class="sign">
    <div class="content">
      <canvas id="canvas" :width="width" :height="height"/>
    </div>
    <div class="btn">
      <button @click="clearCanvas()">清除</button>
      <button @click="save()">保存</button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data () {
    return {
    };
  },
  props: {
    // 画布宽度
    width: {
      type: Number,
      default: window.innerWidth
    },
    // 画布高度
    height: {
      type: Number,
      default: 500
    },
    // 笔触半径
    radius: {
      type: Number,
      default: 10
    },
    // 笔触颜色
    color: {
      type: String,
      default: '#000'
    },
    // 画布填充背景
    fillStyle: {
      type: String,
      default: '#ccc'
    }
  },
  created () {
  },
  mounted () {
    this.int();
  },
  methods: {
    // 绘制涂擦效果圆形
    // @param { integer } 圆心的x坐标
    // @param { integer } 圆心的y坐标
    // @param { integer } 圆心半径
    // @param { string } 填充的颜色
    fillCircle (ctx, x, y, radius, fillColor) {
      ctx.fillStyle = fillColor || this.color;
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.arc(x, y, radius, 0, Math.PI * 2, false); // 标准画圆
      ctx.fill();
    },
    // 保存图片
    save (name = '签名图片') {
      let imgBase64 = this.canvas.toDataURL('image/png'); // 获取截图base64, 1表示质量(无损压缩)
      let a = document.createElement('a');
      a.download = name + '.png'; // 必须要设置download属性才能够直接下载base64图片
      a.href = imgBase64;
      a.click(); // 触发点击，起到下载效果
    },
    // 清除画布
    clearCanvas () {
      let canvas = this.canvas;
      canvas.getContext('2d').fillStyle = this.fillStyle;
      canvas.getContext('2d').fillRect(0, 0, this.width, this.height);
    },
    // 数据初始化
    int () {
      this.canvas = document.querySelector('#canvas');
      let ctx = this.canvas.getContext('2d');
      let move = false; // 按下标识
      ctx.fillStyle = this.fillStyle;
      ctx.fillRect(0, 0, this.width, this.height);
      // 事件兼容PC 移动端
      let eventStart = 'ontouchstart' in document ? 'touchstart' : 'mousedown';
      let eventMove = 'ontouchmove' in document ? 'touchmove' : 'mousemove';
      let eventEnd = 'ontouchend' in document ? 'touchend' : 'mouseup';
      this.canvas.addEventListener(eventStart, (e) => {
        console.log(e);
        let sx = e.touches ? e.touches[0].pageX : e.pageX;
        let sy = e.touches ? e.touches[0].pageY : e.pageY;
        move = true;
        this.fillCircle(ctx, sx, sy, this.radius);
      }, false);
      this.canvas.addEventListener(eventMove, (e) => {
        let sx = e.touches ? e.touches[0].pageX : e.pageX;
        let sy = e.touches ? e.touches[0].pageY : e.pageY;
        move && this.fillCircle(ctx, sx, sy, this.radius);
      }, false);
      this.canvas.addEventListener(eventEnd, (e) => {
        move = false;
      }, false);
    }
  }
};
</script>
<style lang="less" scoped>
.sign{
  .btn {
    padding:10px;
    button {
      height: 50px;
      width:100%;
      margin-bottom:10px;
      font-size: 20px;
    }
  }
}
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。