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

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

NextIabelimg 组件功能亮点

  1. 批量上传图片:支持批量上传多张图片,压缩图片为zip文件,一键上传,用户可以轻松管理和浏览待标注的图像。
  2. 在线标注:提供直观的在线标注界面,用户可以使用矩形框对图片中的目标进行标注,跟labelimg标注图片一样。
  3. 数据共享与协同:标注数据可以实时保存和共享,方便团队协同工作。
  4. 一键导出:标注完成后,可以一键导出标注好的图片文件(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>

标注流程

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

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

总结

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

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

相关推荐
小和尚同志10 小时前
全网影视一网打尽!8.2K Star 的 LibreTV 让你甩开追剧烦恼
开源·github
说私域10 小时前
开源链动2+1模式与AI智能名片融合下的S2B2C商城小程序源码:重构大零售时代新生态
人工智能·重构·开源
国服第二切图仔10 小时前
基于文心开源大模型ERNIE-4.5-0.3B-Paddle私有化部署并构建一个企业智能客服系统
百度·开源·智能客服·知识库·文心大模型·paddle·gitcode
码字的字节12 小时前
阿里开源WebSailor:超越闭源模型的网络智能体新星
开源·阿里·websailor·网络智能体
CCF ODC12 小时前
第三届CCF夜莺开源创新论坛成功举办,夜莺V8正式发布
开源
算家计算14 小时前
6 亿参数玩转 20 + 语言!OuteTTS-1.0-0.6B本地部署教程,轻量模型也能 hold 住跨语言合成
人工智能·开源
Codebee15 小时前
OneCode 组件服务通用协议栈:构建企业级低代码平台的技术基石
前端·前端框架·开源
SkyrimCitadelValinor17 小时前
Git【开源分布式版本控制工具】安装-配置-常用指令-Git远程仓库-IDEA使用Git
分布式·git·gitee·开源·项目管理
GateWorld19 小时前
RISC-V:开源芯浪潮下的技术突围与职业新赛道 (一)为什么RISC-V是颠覆性创新?
开源·risc-v
OpenAnolis小助手19 小时前
Anolis OS 23 架构支持家族新成员:Anolis OS 23.3 版本及 RISC-V 预览版发布
开源·操作系统·龙蜥社区·risc-v·anolis os·龙蜥操作系统