RGBFile - 文件数字基因艺术

RGBFile 是一个纯前端 HTML 单页应用，无需后端，无需依赖，直接在浏览器运行，实现任意文件 ↔ RGB 色条图片双向无损转换，支持中文/长文件名完美还原。

功能特性

• 纯前端实现：无需后端，无需依赖，直接在浏览器运行
• 双向无损转换：任意文件 ↔ RGB 色条图片
• 支持中文文件名：完美还原长文件名
• 支持任意文件类型：.txt/.exe/.iso/.pdf/图片等
• 实时预览：自动渲染彩色条带画布
• 极简极客风：黑色背景，绿色强调色，代码风格界面

使用方法

编码（文件 → RGB 色条图）

1. 在左侧 "Encode - 文件转 RGB 色条" 区域拖入文件或点击选择文件
2. 系统会自动读取文件并生成 RGB 色条
3. 点击 "下载 PNG 图片" 按钮保存生成的色条图片

解码（RGB 色条图 → 原文件）

1. 在右侧 "Decode - RGB 色条转文件" 区域拖入之前生成的 PNG 图片
2. 系统会自动校验 RGBF 标识并还原文件名
3. 点击 "下载原文件" 按钮获取还原后的原始文件

技术实现

• 编码原理：每 3 字节数据转换为 1 个 RGB 颜色，头部 32 色块存储格式标识、文件长度和文件名
• 解码原理：从色条中提取 RGB 值并转换回原始字节数据
• 文件处理：使用 FileReader API 读取文件，Canvas API 绘制色条
• 文件名处理：使用 UTF-8 编码存储文件名，支持中文和长文件名
• 无损转换：直接操作二进制数据，无数据损失

头部结构

• 前 3 色块：RGBF 标识（9 字节）
• 第 4-7 色块：文件长度（12 字节，64 位整数）
• 后面 25 色块：文件名（75 字节，UTF-8 + 0x00 结束符）
• 总头部大小：32 色块（96 字节）

注意事项

• 生成的 PNG 图片包含完整的文件数据，请妥善保存
• 解码时请确保上传的是通过本工具生成的 RGB 色条图片
• 对于超大文件，浏览器可能会有内存限制，建议分批处理

如何运行

直接在浏览器中打开 index.html 文件即可开始使用。

项目结构

RGBFile/
├── index.html    # 主应用文件
└── README.md     # 项目说明

许可证

MIT License