基于AI识别数据的Vue.js图像框选标注

在数字化时代，图像识别技术的应用越来越广泛，尤其是在车牌识别、人脸识别等领域。本文将介绍如何使用Vue.js框架和JavaScript创建一个交互式组件，该组件不仅允许用户在图片上绘制多个区域，加载文字，还提供了清空功能。这种技术可以与AI识别技术相结合，实现在图片上框出识别的区域和文字标注，例如识别车牌号码等。

技术栈简介

为了实现这一功能，我们将使用以下技术：

Vue.js：一个渐进式的JavaScript框架，用于构建用户界面。
HTML5 Canvas：HTML5提供的一个元素，允许通过JavaScript在网页上绘制图形。
JavaScript：用于实现交互逻辑和处理用户输入。

实现步骤

1. 创建Vue组件

首先，我们需要创建一个Vue组件，它将包含图片和用于绘制的画布。

<template>
  <div>
    <div style="margin-bottom: 10px">
      <el-button type="primary" @click="initVideo">开始识别</el-button>
      <el-button type="primary" @click="clearCanvas">清空画布</el-button>
    </div>
    <div class="imageContainer">
      <img  id="img" src="../../assets/img/vehicle.png" alt="">
      <div ref="drawArea" class="draw-area">
        <!-- Canvas将被useDraw函数动态创建并添加到DOM中 -->
      </div>
    </div>
  </div>
</template>

2. 引入绘制逻辑

我们将使用一个自定义的JavaScript模块 autoDraw.js，它封装了绘制逻辑。这个模块提供了初始化画布、绘制图形和文字、清除画布等功能，可去资源库下载完整文件。

import autoDraw from "../../util/autoDraw.js";

3. 初始化和控制绘制

在Vue组件的 methods 中，我们定义了 initDraw 和 clearCanvas 方法来初始化画布和清除绘制。

export default {
  data() {
    return {
      list:[
        {
          name:"粤A·0932L 蓝牌",
          graphCoordinateList: [
            { x: 0.29, y: 0.51 },
            { x: 0.375, y: 0.52 },
            { x: 0.373, y: 0.59 },
            { x: 0.29, y: 0.58 }
          ],
        },
        {
          name:"粤A·G33385 绿牌",
          graphCoordinateList: [
            { x: 0.71, y: 0.56 },
            { x: 0.81, y: 0.57 },
            { x: 0.81, y: 0.64 },
            { x: 0.709, y: 0.63 }
          ], 
        }
      ],
      drawInstances: [], // 保存useDraw的实例
    };
  },
  mounted(){
  },
  methods: {
    // 加载画布
    initDraw(regionData) {
      console.log(regionData,'进入');
      const drawArea = this.$refs.drawArea;
      const img = document.getElementById('img'); // 获取图片元素
      // 获取图片的宽度和高度
      const imgWidth = img.offsetWidth;
      const imgHeight = img.offsetHeight;
      const options = {
        canvasStyle: {
          lineWidth: 5,
          strokeStyle: "red",
          fillStyle: "rgba(255, 0, 0, 0)",
        },
        // x和y是图片上的相对坐标，坐标值的范围从 0 到 1，其中 (0,0) 代表图片左上角，(1,1) 代表图片右下角。
        initPoints: regionData.graphCoordinateList.map(point => {
          // 将比例值转换为像素坐标
          return {
            x: point.x * imgWidth,
            y: point.y * imgHeight
          };
        }),
        onComplete: (points) => {
          console.log("绘图完成，坐标点:", points);
        },
        onClear: () => {
          console.log("画布已清空");
        },
      };
      // 初始化useDraw，并保存实例引用
      const drawInstance = autoDraw();
      drawInstance.init(drawArea, options);
      // 绘制区域名称
      const textX = regionData.graphCoordinateList[0].x * imgWidth - 10;
      const textY = regionData.graphCoordinateList[0].y * imgHeight - 10;
      drawInstance.drawText(textX, textY, regionData.name, "red", "24px Arial");
      // 保存实例
      this.drawInstances.push(drawInstance);
    },
    // 获取数据判断是否加载画布
    initVideo() {
      this.$nextTick(res=>{
        console.log(this.list,'图片区域数据');
        if(this.list.length > 0){
          // 如果有值则渲染区域出来
          this.list.forEach((regionData) => {
            this.initDraw(regionData);
          });
        }
      })
    },
    // 清空画布
    clearCanvas(){
      this.drawInstances.forEach(instance => {
        instance.onClear();
      });
      this.drawInstances = []; // 清空实例数组
    }
  },
  // 在组件销毁前清理资源
  beforeDestroy() {
  },
};

4. 样式设置

最后，我们需要为图片容器和画布设置样式，以确保它们正确显示。

<style lang="scss" scoped>
  .imageContainer {
    position: relative;
    width: 100%;
    max-width: 100%; /* 根据图片尺寸调整 */
    height: 700px;
    img{
      width: 100%;
      height: 100%;
    }
    .draw-area {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
</style>