canvas AI智能识别画框

<template>
  <div class="app-container calendar-list-container">
        <canvas id="canvas" @mousedown="handleMousedown" @mousemove="handleMousemove"></canvas>
        <div><el-button @click="init">清空画布</el-button></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isDrawing: false,
      imgObject: {},
      clickList: [], // 鼠标依次在 canvas 上点击过的位置
      boundaryValue: 30, // 边界值
    };
  },
  mounted() {
    this.init()

    const callback = (event) => {
      // 取消绘制状态
      this.isDrawing = false

      // 当落点在 canvas 范围内，将落点坐标添加到 clickList列表
      var c = document.getElementById("canvas");
      if(event.target == c) {
        const currClick = {
          x: event.offsetX,
          y: event.offsetY,
        }
        const firstClick = this.clickList[0]

        // 边界判断，当前点与初始点距离较近时，将初始点放进列表
        // 边界判断，当前点与初始点距离较远时，将当前点放进列表
        if(this.clickList.length 
            && Math.abs(currClick.x - firstClick.x) < this.boundaryValue 
            && Math.abs(currClick.y - firstClick.y) < this.boundaryValue) {
            this.clickList.push(firstClick)
        } else {
          this.clickList.push(currClick)
        }
      }
    }

    // 为了防止鼠标移出 canvas 落点，需要将 mouseup 添加到 body 上
    document.body.addEventListener('mouseup', callback)
    this.$once('hook:destroyed', () => {
      document.body.removeEventListener('mouseup', callback)
    })
  },
  methods: {
    init() {
      this.clickList = []

      var c = document.getElementById("canvas");
      var ctx = c.getContext("2d");

      // 绘制图片
      this.imgObject = new Image();
      this.imgObject.src = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
			this.imgObject.onload = () => {

        // 根据图片宽高，设置 canvas 宽高，清除 canvas 里的内容
        c.width = 700
        c.height = 700 / this.imgObject.width * this.imgObject.height

        // 将图片绘制到 canvas 上面
				ctx.drawImage(this.imgObject, 0, 0);
      }
    },
    // 还原到只有一张图片的 canvas 基础状态
    resetBaseCanvas() {
      var c = document.getElementById("canvas");
      var ctx = c.getContext("2d");

      // 根据图片宽高，设置 canvas 宽高，清除 canvas 里的内容
      c.width = c.width

      // 将图片绘制到 canvas 上面
      ctx.drawImage(this.imgObject, 0, 0);
    },
    // 根据 clickList列表 绘制圆点、连线
    drawCanvas() {
      var c = document.getElementById("canvas");
      var ctx = c.getContext("2d");

      // 根据 clickList 画落点圆形
      this.clickList.map(this.drawDot)

      // 根据 clickList 画落点连线
      if(this.clickList.length >= 2) {
        this.clickList.reduce((init, curr) => {
          this.drawLine(init, curr)
          return curr
        })
      }
    },
    // 画点
    drawDot({x, y}) {
      var c = document.getElementById("canvas");
      var ctx = c.getContext("2d");
      ctx.beginPath();
      ctx.arc(x, y, 5, 0, 2*Math.PI);
      ctx.fillStyle="yellow";
      ctx.fill();
    },
    /**
     * 画线
     * prevClick：上次落点
     * currClick：当前落点
     */
    drawLine(prevClick, currClick) {
      var c = document.getElementById("canvas");
      var ctx = c.getContext("2d");

      // 根据上一次绘制点与当前绘制点描绘一条路径
      ctx.beginPath();
      ctx.moveTo(prevClick.x, prevClick.y);
      ctx.lineTo(currClick.x, currClick.y)
      ctx.lineWidth = 2;
      ctx.strokeStyle="yellow";
      ctx.stroke();
    },
    handleMousemove(e) {
      const currClick = {
        x: e.offsetX,
        y: e.offsetY,
      }
      if(this.isDrawing) {
        this.resetBaseCanvas()
        this.drawCanvas()

        let dotClick = currClick // 圆点将要落点的位置

        // 必须之前已经画过点才可以画线
        if(this.clickList.length) {
          // 边界判断，当前点与初始点距离较近时，进行闭环操作
          const firstClick = this.clickList[0]
          const prevClick = this.clickList[this.clickList.length - 1]
          if(Math.abs(currClick.x - firstClick.x) < this.boundaryValue 
            && Math.abs(currClick.y - firstClick.y) < this.boundaryValue) {
            this.drawLine(prevClick, firstClick)
            dotClick = firstClick
          } else {
            this.drawLine(prevClick, currClick)
          }
        }
        this.drawDot(dotClick)

      }
    },
    handleMousedown(e) {
      this.isDrawing = true
    }
  }
};
</script>