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

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

NextIabelimg 组件功能亮点

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

组件安装与使用

安装

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

$ pnpm add next-element-vue

1
2

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

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

标注流程

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

• 文档示例

• 在线标图

• 图片管理，批量上传和导出标识图片

• 导出文件使用labelimg打开效果，标注数据完全一致

总结

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

如何系统的去学习大模型LLM ？

作为一名热心肠的互联网老兵，我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

但苦于知识传播途径有限，很多互联网行业朋友无法获得正确的资料得到学习提升，故此将并将重要的 AI大模型资料 包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。