DTD(DrawTrainData)

DTD(DrawTrainData)是一个用于创建手绘图像(二维单通道)数据集的Web应用，允许用户通过简单的手绘方式生成用于AI训练的图像数据，并支持多种格式导出。

在线体验

https://shortlight5980.github.io/DrawTrainData/

使用方法

1. 打开index.html文件
2. 在尺寸选择区选择图像大小，或自定义输入宽度和高度
3. 在画板上使用鼠标绘制图像
4. 点击"保存到图片夹"按钮保存当前绘制的图像
5. 重复步骤2-4绘制多张图像
6. 在导出区选择导出格式（BMP或TXT）
7. 点击"导出数据集"按钮下载ZIP包

注意

• 下载的数据集微软会报不安全不让打开（只是个无辜的bmp or txt文件...）
• 可以使用解压软件，例如7zip解压缩，这样就可以打开了

功能特性

1. 图像大小选择

• 提供默认图像尺寸选项：16×16、32×32、64×64、128×128
• 支持用户手动输入自定义宽度和高度

2. 画板功能

• 根据选择的图像大小生成对应的网格画板
• 支持鼠标绘制，实时显示绘制效果

3. 操作控制

• 保存按钮：将当前绘制的图像暂存到图片夹
• 重置按钮：清空当前画板内容
• 重置图片夹：清空所有已保存的图片

4. 图片夹管理

• 显示已保存图片的缩略图
• 统计图片数量
• 支持本地存储，刷新页面后数据不丢失

5. 数据集导出

• 支持BMP格式导出
• 支持TXT格式导出（二维数组）
• 所有导出文件压缩为一个ZIP包下载

项目结构

DrawTrainData/
├── index.html          # 主页面
├── styles.css          # 样式文件
├── script.js           # 主脚本文件
├── lib/
│   ├── jszip.min.js    # JSZip库，用于文件压缩
│   └── FileSaver.min.js # FileSaver.js库，用于文件下载
└── README.md           # 项目说明

技术栈

• HTML5：页面结构
• CSS3：页面样式
• JavaScript (ES6+)：业务逻辑
• Canvas API：绘制功能
• JSZip：文件压缩
• FileSaver.js：文件下载
• localStorage：数据持久化

数据格式

图像数据

图像数据以二维数组格式存储，其中：

• 0表示白色像素
• 1表示黑色像素

示例（3×3图像）：

[
  [0, 1, 0],
  [1, 0, 1],
  [0, 1, 0]
]

本地存储

用户数据存储在浏览器的localStorage中，键名为dtd-workspace。

浏览器兼容性

• Chrome浏览器
• Firefox浏览器
• Safari浏览器
• Edge浏览器