vue3+ts实现labelimg的在线标图工具

在机器学习和计算机视觉领域，准确的目标识别离不开高质量的标注数据。为了提高数据标注的效率和便捷性，我开发了一个基于 Vue 3 的组件库------next-element-vue。其中的 NextIabelimg 组件专为目标识别图片标注设计，支持批量上传图片、在线标注图片并一键导出标注结果。该组件特别适用于需要大量目标识别标注数据的深度学习模型训练，例如 YOLOv5。

NextIabelimg 组件功能亮点

批量上传图片：支持批量上传多张图片，压缩图片为zip文件，一键上传，用户可以轻松管理和浏览待标注的图像。
在线标注：提供直观的在线标注界面，用户可以使用矩形框对图片中的目标进行标注，跟labelimg标注图片一样。
数据共享与协同：标注数据可以实时保存和共享，方便团队协同工作。
一键导出：标注完成后，可以一键导出标注好的图片文件（images）和标签（labels）的zip压缩文件，导出的文件可以直接用于 YOLOv5 等深度学习模型的训练。

组件安装与使用

安装

首先，确保您的项目中已经安装了 Vue 3。然后通过 npm 安装 next-element-vue 组件库：

bash 复制代码

$ pnpm add next-element-vue

使用文档

在您的 Vue 组件中引入并使用 NextIabelimg 组件：

vue3 复制代码

<script setup lang="ts">
import { ref } from 'vue';
const classes = ref<any>(['动物-马', '动物-鹿', '动物-狼', '动物-狐狸']);
const list = ref<any>([
	{
		id: 1,
		imageSrc: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
		labels: [
			{
				type: 3,
				startX: 182.5,
				startY: 28,
				rectWidth: 418,
				rectHeight: 288,
				canvasWidth: 750,
				canvasHeight: 500,
			},
			{
				type: 1,
				startX: 216.5,
				startY: 163,
				rectWidth: 344,
				rectHeight: 302,
				canvasWidth: 750,
				canvasHeight: 500,
			},
		],
	},
	{
		id: 2,
		imageSrc: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
		labels: [
			{
				startX: 264.5,
				startY: 172,
				rectWidth: 207,
				rectHeight: 221,
				canvasWidth: 750,
				canvasHeight: 500,
				type: 0,
			},
		],
	},
	{
		id: 3,
		imageSrc: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
		labels: [],
	},
	{
		id: 4,
		imageSrc: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
		labels: [],
	},
]);
const onChangeLabel = (rects, txt) => {
	// console.log(rects);
	// console.log(txt);
};
const onSave = (node, done) => {
	console.log(node);
	setTimeout(() => {
		done();
	}, 500);
};
</script>

<template>
	<div class="layout-container">
		<div>
                    <NextLabelimg :classes="classes" :data="list" @change="onChangeLabel" @save="onSave"> </NextLabelimg>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.layout-container {
	text-align: center;
}
</style>

标注流程

上传图片：点击上传按钮，选择要标注的图片，可以一次性上传多张图片。
在线标注：在标注界面中，使用鼠标拖动绘制矩形框，对目标区域进行标注。标注完成后，标注数据会自动保存。
导出数据：点击导出按钮，将标注结果导出为文件。导出的文件格式兼容 YOLOv5，可以直接用于模型训练。

文档示例

在线标图

图片管理，批量上传和导出标识图片
导出文件使用labelimg打开效果，标注数据完全一致

总结

next-element-vue 提供了一个高效、便捷的图片标注工具，NextIabelimg 组件使得图片标注过程变得简单直观。通过批量上传、在线标注和一键导出功能，极大地提高了标注效率，并且导出的标注数据可以直接用于深度学习模型的训练。如果您正在寻找一款强大且易用的图片标注工具，不妨试试 next-element-vue！

更多信息和文档，请访问我们的 GitHub 仓库。欢迎大家试用并提出宝贵意见！