图像标注

lishihuan大约 16 分钟

图像标注

图像和视频标注工具

参考-海康威视--https://ai.hikvision.com/intellisense/ai-training/console/data/#/calibrate/onlineopen in new window

参考：https://app.basic.ai/datasets/data?id=1248731open in new window

lishihuan/

1. 常用工具

CVAT（Computer Vision Annotation Tool）：一个强大的开源图像标注工具，支持多种标注任务，并且可以直接在 Web 浏览器中运行。
VoTT（Visual Object Tagging Tool）：微软开发的开源标注工具，支持 Web 端操作。
coco-annotator
- 网站open in new window
- 前端：Vue.js, Vuex, Vue Router, Webpack, ESLint
- 后端：Python, Flask, SQLAlchemy, SQLite
labelimg
- 附txt与xml文件相互转化代码open in new window
labelme 有单机版
- 数据格式open in new window

VoTT (Visual Object Tagging Tool)、CVAT 和 COCO Annotator 都是流行的图像和视频标注工具，但它们各自在功能、用户体验、安装部署等方面有所不同。下面对这三者进行详细对比：

2. 常用工具对比

2.1. 功能比较

功能	VoTT	CVAT	COCO Annotator	LabelImg	LabelMe
注释类型	支持边界框（Bounding Box）、分割（Segmentation）	支持边界框（Bounding Box）、多边形、线、点、分割等	支持边界框、多边形、点、分割等	支持边界框和分割	支持边界框、多边形
图像/视频支持	支持图像和视频	支持图像和视频	仅支持图像	仅支持图像	支持图像
标签管理	支持自定义标签	支持自定义标签，支持标签层次结构	支持自定义标签，支持标签层次结构	支持自定义标签	支持自定义标签
数据导出格式	支持COCO、YOLO、TensorFlow、Caffe等格式	支持COCO、YOLO、Pascal VOC、TFRecord等格式	支持COCO格式、YOLO、Pascal VOC等格式	支持Pascal VOC、YOLO格式	支持JSON格式
热键支持	支持热键，提升标注效率	支持热键，提升标注效率	支持热键，提升标注效率	支持热键	支持热键
多人协作	不支持多人协作	支持多人协作和团队管理	支持多人协作，任务分配与进度跟踪	不支持多人协作	不支持多人协作
视频标注	支持视频标注（逐帧标注）	支持视频标注，支持高级操作如轨迹标注	不支持视频标注	不支持视频标注	不支持视频标注
技术栈	语言：Python, TypeScript 框架：React 数据格式：支持 COCO、Pascal VOC、TFRecord 等格式依赖：Node.js, Electron, Redux 等	语言：Python, TypeScript 框架：Django, React 数据格式：支持 COCO、Pascal VOC、YOLO 等格式依赖：OpenCV, Docker, Redis 等	语言：JavaScript（前端），Python（后端）框架：后端 Flask - Python 微型 Web 框架 MongoDB - 跨平台文档导向数据库 MongoEngine - MongoDB 的 Python 对象数据映射器前端 Vue - 构建用户界面的 JavaScript 框架 Axios - 基于 Promise 的 HTTP 客户端 PaperJS - HTML Canvas 向量图形库 Bootstrap - 前端组件库数据格式：专注于COCO格式依赖：Node.js和Python Flask	语言：Python 框架：使用Qt5作为图形用户界面（GUI），主要基于PyQt5 数据格式：支持Pascal VOC、YOLO格式导出依赖：Python库如lxml、OpenCV等	语言：JavaScript，Python 框架：前端使用React.js，后端使用Flask 数据格式：主要使用JSON格式依赖：Node.js环境，常用的前端库和后端库

2.2. 用户体验

特性	VoTT	CVAT	COCO Annotator	LabelImg	LabelMe
界面设计	简洁直观，适合初学者，易于上手	界面功能丰富，但较复杂，适合进阶用户	界面简洁直观，适合快速标注	界面简洁，适合基本标注需求	界面较简单，适合初学者
学习曲线	学习曲线较短，适合入门级用户	学习曲线较长，适合有一定经验的用户	学习曲线较短，适合中小型项目的用户	学习曲线较短，易于上手	学习曲线较短，易于理解
文档和支持	文档相对简洁，社区支持一般	文档详细，社区活跃，GitHub支持良好	文档较为完善，社区支持活跃	文档简单，支持一般	文档较为基础，社区支持一般
可视化和交互	提供基本的图形标注，界面交互直观	提供强大的可视化功能，支持复杂的注释操作	提供基本的图形标注，用户界面简洁易懂	提供基本的图形标注	提供基本的图形标注

2.3. 部署与安装

特性	VoTT	CVAT	COCO Annotator	LabelImg	LabelMe
安装方式	可以直接从 GitHub 克隆源码，支持 Windows 和 macOS，支持 Docker 部署	通过 Docker Compose 部署，支持 Linux、Windows、macOS	支持通过 Docker 部署，易于安装	通过 pip 安装，支持多平台	通过 pip 安装，支持多平台
安装复杂度	安装简单，特别适合 Windows 用户	安装相对复杂，依赖较多，推荐 Docker 部署	安装较简单，通过 Docker 或源代码安装	安装简单，依赖较少	安装简单，依赖较少
系统要求	轻量，支持 Windows/macOS，要求较低	需要较高的硬件和资源，特别适合处理大型数据集	适合小型和中型数据集，硬件要求相对较低	轻量级，适合一般用户	轻量级，适合一般用户

2.4. 开源与社区支持

特性	VoTT	CVAT	COCO Annotator	LabelImg	LabelMe
开源许可证	MIT License	Apache 2.0 License	MIT License	MIT License	MIT License
社区活跃度	社区支持一般，更新较慢	社区非常活跃，GitHub上的支持广泛，定期更新	社区活跃，更新频繁	社区较小，更新不频繁	社区较小，更新不频繁
开发支持	支持开发者自定义插件和扩展	支持插件开发和自定义功能，功能非常强大	具有一定的扩展性，支持脚本和插件开发	具备一定的开发支持	支持简单的扩展功能

2.5. 性能与扩展性

特性	VoTT	CVAT	COCO Annotator	LabelImg	LabelMe
性能	性能较好，适合中小型项目和较小数据集	性能优化良好，适合大型数据集，支持高效的分布式标注	性能适中，适用于小型和中型项目	性能良好，适合一般标注需求	性能适中，适合简单项目
扩展性	支持一些基本的扩展，如自定义标签，支持多种数据格式	支持高级功能扩展，如视频跟踪、自动标注等	通过自定义脚本和插件支持功能扩展	支持自定义标注功能	支持基本的扩展

2.6. 适用场景

特性	VoTT	CVAT	COCO Annotator	LabelImg	LabelMe
适用项目规模	适合中小型项目，快速标注需求	适合大型项目、复杂标注任务，支持高效的团队协作	适合中小型项目和较简单的标注需求	适合个人和小型项目	适合简单项目和教育用途
团队协作	不支持团队协作	支持团队协作和任务分配，适合大规模标注项目	支持团队协作，任务分配与进度跟踪	不支持多人协作	不支持多人协作

2.7. 总结

VoTT (Visual Object Tagging Tool)：
- 优点：界面简洁，适合中小型项目，支持图像和视频标注，适合快速入门的用户。
- 缺点：功能较为基础，不支持团队协作，缺少高级注释功能，如视频跟踪等。
- 适用场景：个人或小团队进行简单的图像和视频标注，快速启动项目。
CVAT (Computer Vision Annotation Tool)：
- 优点：功能全面，支持各种复杂标注，适合团队协作，支持大规模数据集，支持高级注释功能，如视频轨迹、自动标注等。
- 缺点：界面较复杂，学习曲线较长，安装较为复杂。
- 适用场景：大规模项目、复杂标注任务或团队合作，适合需要高级功能的用户。
COCO Annotator：
- 优点：简洁直观，易于部署，支持基本的标注任务，适合中小型项目。
- 缺点：功能较为基础，缺乏CVAT那样的高级标注功能。
- 适用场景：小团队或单人项目，适合快速完成图像标注任务。
LabelImg：
- 优点：轻量级，易于安装和使用，适合个人用户和小型项目，支持基本的边界框标注。
- 缺点：功能较为有限，不支持视频标注或多人协作，适合简单标注任务。
LabelMe：
- 优点：简单易用，适合初学者，支持基本的标注类型，适合教育和小型项目。
- 缺点：功能相对单一，不支持复杂的标注需求和多人协作，社区支持一般。

选择建议：

如果你的项目需要快速标注且功能要求较低，可以选择 VoTT。
如果需要强大的功能支持、大型团队协作或者复杂标注任务，CVAT 是更好的选择。
如果你需要简洁高效的工具进行基础标注，且项目规模较小，COCO Annotator 是一个不错的选择。
如果你的项目需要轻量级的解决方案，且主要进行边界框标注，LabelImg 是理想的选择。
如果你是初学者，或者希望进行基础的图像标注并进行教育用途，LabelMe 将会是合适的选择。

cvat

Cvat汉化教程open in new window

1. 项目根目录

CVAT 项目的根目录通常包含以下文件和目录：

README.md：项目的基本信息和使用说明。
docker-compose.yml：Docker Compose 配置文件，用于定义和运行多容器 Docker 应用。
requirements.txt：Python 项目的依赖库列表，后端使用的库。
cvat/：后端代码目录。
cvat-ui/：前端代码目录。
data/：用于存储上传的数据和模型。
scripts/：包含一些脚本文件，可能用于初始化数据库或其他管理任务。

2. 后端 (`cvat/`)

后端部分主要使用 Django 框架，结构如下：

cvat/：后端的主要代码目录。
- settings.py：Django 项目的设置文件，包括数据库配置、应用注册等。
- urls.py：URL 路由配置，定义了 API 的路径。
- views.py：视图函数，处理请求并返回响应。
- models.py：数据库模型定义，包含与标注任务、用户等相关的数据结构。
- serializers.py：用于数据序列化和反序列化的类，支持 API 数据格式的转换。
- migrations/：数据库迁移文件，记录模型更改和数据库结构更新。
cvat/apps/：应用模块，通常用于不同功能的分离。
- auth/：用户身份验证和权限管理相关代码。
- annotations/：与标注相关的逻辑和模型。
- tasks/：任务管理和处理相关代码。

3. 前端 (`cvat-ui/`)

前端部分主要使用 React，结构如下：

cvat-ui/：前端代码目录。
- src/
  ：源代码目录，包含主要的应用逻辑和组件。
  - components/：可复用的组件，负责不同功能的 UI。
  - containers/：容器组件，通常用于连接 Redux 状态和 UI。
  - redux/：状态管理相关代码，使用 Redux 来管理应用状态。
  - api/：与后端 API 交互的代码。
  - utils/：一些工具函数和辅助模块。
public/：静态文件目录，包含 HTML 模板和其他静态资源。

4. 数据存储 (`data/`)

data/：用于存储上传的数据和导出结果。这里的文件可能包括图像、视频以及标注文件。

5. 脚本 (`scripts/`)

scripts/：一些自动化脚本，用于初始化数据库、迁移数据或其他管理任务。

总结

CVAT 的项目结构是模块化的，后端使用 Django 框架，前端使用 React，便于开发和维护。这样的结构不仅清晰，也使得不同团队可以独立开发前后端功能。

如果你需要更深入的某个模块或文件的解释，请告诉我！

3. COCO Annotator 使用

admin/admin

https://gitcode.com/gh_mirrors/co/coco-annotator/overviewopen in new window

前端使用的插件： paperjsopen in new window

├── backend            # 后端服务代码
│    ├── datasets       # 数据集管理相关代码
│    ├── db             # 数据库操作相关代码
│    ├── models       # 模型定义
│    └── ...         # 其他前端相关的组件和样式等
├── client          # 前端Vue应用代码
├── db            	# 可能包含与数据库相关的文件和配置，例如数据库模型、迁移文件等。这部分代码通常用于管理数据的存储和检索。

安装：

git clone https://github.com/jsbroks/coco-annotator ## 下载
cd coco-annotator

docker-compose up # 通过docker-compose 来运行
docker-compose down # 停止服务

3.1 要求

Python（建议使用 Python 3.6 或更高版本）
Node.js（建议使用 Node 14 或更高版本）

3.2 Python安装

官网open in new window
检查是否安装

python --version

安装时，请确保勾选“Add Python to PATH”选项

3.3 克隆代码库

打开命令提示符（Cmd）或 PowerShell，运行以下命令以克隆 COCO Annotator 的代码库：

git clone https://github.com/jsbroks/coco-annotator.git
# 进入项目目录
cd coco-annotator

3.4 设置 Python 虚拟环境（可选）

为了避免依赖冲突，可以创建一个虚拟环境：

python -m venv venv
venv\Scripts\activate  # 激活虚拟环境

10.安装 Python 依赖使用 pip 安装所需的 Python 依赖：

cd backend

pip install -r requirements.txt

11.安装 Node.js 依赖在项目目录中，运行以下命令安装 Node.js 依赖：

npm install

12.构建前端构建前端文件：

npm run build

13.运行服务器启动开发服务器： python app.pyopen in new window

默认情况下，应用程序将在 http://127.0.0.1:5000open in new window 上运行。

注意事项

14.确保在执行每一步时没有错误。如果出现问题，请仔细检查依赖项是否已正确安装。 15.如果你使用的是 Windows PowerShell，请确保以管理员身份运行 PowerShell，以避免权限问题。 16.对于 Python 和 Node.js 的安装，建议使用最新版本以获得最佳兼容性。

运行应用打开浏览器并访问 http://127.0.0.1:5000open in new window，就可以开始使用 COCO Annotator 进行标注。如果在安装或运行过程中遇到任何问题，请随时询问！

前端使用

Annotator.vue 主界面
- Category.vue 右上角标签树（标签-> 系统中的类型）
  - Annotation.vue右上角标签树二级，并且图片中的标签图层也是在这个组件中完成初始化的
    - 在emitModify方法中实现对Paper对象的转换，将标注层【覆盖物】数据转为json格式，以复合路径对象记录，方便数据的回显
SelectTool.vue
CustomShortcut.vue 快捷键设置&监听组件
- 搭配shortcuts.js 设置快捷键回调
SelectTool.vue 弹窗悬浮组件
PolygonTool.vue折现工具
- onMouseDown方法添加了 this.$parent.currentCategory.createAnnotation(); 实现添加一个新的覆盖物，不加这个多次添加的都会被合并到一起

4. COCO 格式转换为 Paper.js 能识别的格式，并回显到页面中

要将 COCO 格式的标注数据（例如，边界框、分割区域等）转换为 Paper.js 能识别的格式，并回显到页面中，通常需要进行以下几个步骤：

1. 解析 COCO 格式的数据

COCO 格式包含了 annotations、images 和 categories 等信息。你首先需要提取 annotations（标注数据）和 images（图像信息）来进行处理。

例如，COCO 格式中有以下内容：

{
    "images": [
        {
            "id": 1,
            "file_name": "image1.jpg",
            "width": 1024,
            "height": 768
        }
    ],
    "annotations": [
        {
            "id": 1,
            "image_id": 1,
            "category_id": 2,
            "bbox": [100, 150, 200, 250],
            "segmentation": [],
            "area": 50000,
            "iscrowd": 0
        },
        {
            "id": 2,
            "image_id": 1,
            "category_id": 1,
            "bbox": [50, 60, 250, 300],
            "segmentation": [[50, 60, 100, 120, 250, 180, 200, 250]],
            "area": 45000,
            "iscrowd": 0
        }
    ]
}

在这个例子中：

annotations 数组包含了每个标注的信息。
bbox 是一个边界框，包含 [x, y, width, height]。
segmentation 包含分割区域，通常是一个多边形的顶点坐标数组。

2. 将 COCO 格式数据转换为 Paper.js 格式

Paper.js 处理的图形通常是基于路径（Path）、矩形（Rectangle）等对象。因此，你需要将 COCO 格式的标注数据（如 bbox 或 segmentation）转换成 Paper.js 可以理解的路径对象。

a. 转换边界框（Bounding Box）

如果标注是边界框（bbox），你可以直接使用 Paper.js 创建一个矩形（Path.Rectangle）对象。bbox 通常包含四个值：[x, y, width, height]。

// 假设你从 COCO 数据中获取了 bbox
const bbox = [100, 150, 200, 250];  // [x, y, width, height]

// 在 Paper.js 中创建矩形
const rect = new paper.Path.Rectangle(new paper.Rectangle(bbox[0], bbox[1], bbox[2], bbox[3]));
rect.strokeColor = 'blue';  // 可以设置颜色
rect.strokeWidth = 2;  // 设置边框宽度

b. 转换分割区域（Segmentation）

如果标注是分割区域（segmentation），它通常是一个多边形（polygon），由一组顶点坐标组成。在 Paper.js 中，你可以使用 Path 来绘制多边形。

// 假设你从 COCO 数据中获取了 segmentation
const segmentation = [[50, 60, 100, 120, 250, 180, 200, 250]];  // 多边形的顶点数组

// 在 Paper.js 中绘制多边形
const points = segmentation[0];  // 获取第一个分割区域的顶点
const polygon = new paper.Path();
polygon.add(new paper.Point(points[0], points[1]));  // 将点添加到路径
for (let i = 2; i < points.length; i += 2) {
    polygon.add(new paper.Point(points[i], points[i + 1]));
}
polygon.closed = true;  // 关闭路径，形成一个封闭的多边形
polygon.strokeColor = 'red';  // 设置边框颜色
polygon.fillColor = new paper.Color(1, 0, 0, 0.5);  // 填充颜色

c. 绘制标注类别（Category）

如果需要显示标注的类别（如“人”或“狗”），可以在每个标注上方添加文本标签。你可以从 COCO 数据中的 category_id 获取类别，然后根据类别 ID 显示相应的标签。

const categoryId = 2;  // 假设是狗类
const categories = [
    { id: 1, name: 'person' },
    { id: 2, name: 'dog' }
];

const category = categories.find(c => c.id === categoryId);
const label = category ? category.name : 'unknown';

// 创建文本标签
const text = new paper.PointText(new paper.Point(bbox[0], bbox[1] - 10));  // 设置位置
text.justification = 'center';
text.fillColor = 'black';
text.fontSize = 14;
text.content = label;

3. 将标注回显到画布

使用 Paper.js 时，可以将这些标注（矩形、多边形、文本等）绘制到画布中。在 COCO 格式的回显过程中，你需要确保：

加载正确的图像。
在图像上绘制所有的标注。
处理标注的显示样式（如颜色、边框、标签等）。

// 加载图像并将标注绘制在其上
const imageUrl = 'path/to/your/image.jpg';
const image = new paper.Raster(imageUrl);
image.onLoad = function() {
    // 图像加载完成后，绘制标注
    annotations.forEach(annotation => {
        if (annotation.bbox) {
            // 如果是边界框，绘制矩形
            const rect = new paper.Path.Rectangle(new paper.Rectangle(annotation.bbox[0], annotation.bbox[1], annotation.bbox[2], annotation.bbox[3]));
            rect.strokeColor = 'blue';
            rect.strokeWidth = 2;
        }
        if (annotation.segmentation && annotation.segmentation.length > 0) {
            // 如果有分割区域，绘制多边形
            const points = annotation.segmentation[0];
            const polygon = new paper.Path();
            polygon.add(new paper.Point(points[0], points[1]));
            for (let i = 2; i < points.length; i += 2) {
                polygon.add(new paper.Point(points[i], points[i + 1]));
            }
            polygon.closed = true;
            polygon.strokeColor = 'red';
            polygon.fillColor = new paper.Color(1, 0, 0, 0.5);
        }
    });
};

4. 处理回显后的交互

删除和编辑标注：如果要允许用户编辑这些标注，可以为每个标注（矩形或多边形）添加交互处理（如拖动、缩放等）。Paper.js 提供了 onMouseDown, onMouseDrag, onMouseUp 等事件，可以用来处理用户的交互。

总结

通过上述步骤，你可以将 COCO 格式的标注数据转换为 Paper.js 可以识别和渲染的格式，并将其回显到页面中。主要的转换操作包括将 bbox 转换为矩形，segmentation 转换为多边形路径，最后通过 Paper.js 在画布上进行绘制。根据需要，你还可以为这些标注添加更多的交互和样式。

图像标注

# 图像标注

# 1. 常用工具

# 2. 常用工具对比

# 2.1. 功能比较

# 2.2. 用户体验

# 2.3. 部署与安装

# 2.4. 开源与社区支持

# 2.5. 性能与扩展性

# 2.6. 适用场景

# 2.7. 总结

# 选择建议：

# cvat

# 1. 项目根目录

# 2. 后端 (cvat/)

# 3. 前端 (cvat-ui/)

# 4. 数据存储 (data/)

# 5. 脚本 (scripts/)

# 总结

# 3. COCO Annotator 使用

# 3.1 要求

# 3.2 Python安装

# 3.3 克隆代码库

# 3.4 设置 Python 虚拟环境（可选）

# 前端使用

# 4. COCO 格式转换为 Paper.js 能识别的格式，并回显到页面中

# 1. 解析 COCO 格式的数据

# 2. 将 COCO 格式数据转换为 Paper.js 格式

# a. 转换边界框（Bounding Box）

# b. 转换分割区域（Segmentation）

# c. 绘制标注类别（Category）

# 3. 将标注回显到画布

# 4. 处理回显后的交互

# 总结

图像标注

1. 常用工具

2. 常用工具对比

2.1. 功能比较

2.2. 用户体验

2.3. 部署与安装

2.4. 开源与社区支持

2.5. 性能与扩展性

2.6. 适用场景

2.7. 总结

选择建议：

cvat

1. 项目根目录

2. 后端 (`cvat/`)

3. 前端 (`cvat-ui/`)

4. 数据存储 (`data/`)

5. 脚本 (`scripts/`)

总结

3. COCO Annotator 使用

3.1 要求

3.2 Python安装

3.3 克隆代码库

3.4 设置 Python 虚拟环境（可选）

前端使用

4. COCO 格式转换为 Paper.js 能识别的格式，并回显到页面中

1. 解析 COCO 格式的数据

2. 将 COCO 格式数据转换为 Paper.js 格式

a. 转换边界框（Bounding Box）

b. 转换分割区域（Segmentation）

c. 绘制标注类别（Category）

3. 将标注回显到画布

4. 处理回显后的交互

总结