基于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>