图片混淆与资源隐写工具

一个纯前端、单文件的高级 Web 工具，集成了 Gilbert 曲线像素混淆算法与多文件资源隐写功能。无需后端，所有处理均在浏览器中完成。

---

✨ 核心功能

🖼️ 图片像素混淆/还原

• 算法核心：基于 Gilbert (广义 Hilbert) 空间填充曲线。
• 视觉效果：将图像像素按特定路径进行偏移置换，达到视觉混淆效果。
• 无损还原：输入正确的偏移量，可完美还原原始图像。
• 偏置控制：支持黄金分割比例（默认）与自定义像素偏移量。

📂 多资源隐写

• 格式兼容：支持将任意格式文件（图片、视频、PDF、文本等）嵌入 PNG 图片的 tEXt 数据块中。
• 无痕嵌入：嵌入过程不会改变图片的视觉内容（不修改像素数据），只修改 PNG 文件结构。
• 多文件支持：支持一次性上传并嵌入多个资源文件。

📺 智能视频处理

• 自动截帧：拖入视频文件时，自动提取第一帧作为主操作图片。
• 自动嵌入：提取帧的同时，将视频源文件自动添加到资源列表中，方便携带。

🎨 交互体验

• 瀑布流布局：资源预览区采用大尺寸瀑布流设计，清晰展示所有嵌入资源。
• 全屏预览：点击资源即可全屏预览，支持图片/视频/文本，并支持上一张/下一张切换。
• 拖拽交互：全区域支持拖拽上传，主图与资源区的拖拽逻辑已统一优化。
• 智能打包：点击“下载”时，自动将当前画布内容与所有资源列表中的文件打包生成最终 PNG。

---

🔧 核心技术原理

1. Gilbert 曲线像素置换

代码实现了 gilbert2d 与 generate2d 递归算法，生成覆盖整个画布的哈密顿路径。

通过改变像素在曲线上的位置，将原本相邻的像素分散开来，破坏图像的可识别性，同时保留图像直方图信息。

2. PNG tEXt Chunk 注入

使用 PngInfoHandler 类直接操作 PNG 二进制数据。

• CRC32 校验：手动计算数据块的校验值，确保文件结构完整。
• IHDR/IEND 解析：在 IHDR 之后、IEND 之前插入自定义 tEXt 块。
• Base64 编码：将任意文件转换为 Base64 字符串存储在 Key-Value 结构中。

3. 纯前端渲染

• Canvas API：用于视频帧提取、像素读写、数据导出。
• Blob & FileReader：处理文件读取与二进制数据转换。
• CSS Grid/Masonry：实现响应式瀑布流布局。

---

🚀 使用指南

1. 准备工作

下载 index.html 文件，使用现代浏览器直接打开。无需任何服务器环境。

2. 混淆图片

1. 上传主图：将一张图片拖入左侧“主文件”区域。
2. 设置偏移：在左侧调整“偏移设置”滑块，或直接输入具体像素值。
3. 执行混淆：点击 “🔒 混淆图片” 按钮。
4. 查看效果：右侧预览区将显示混淆后的噪点图。
5. 下载保存：点击 “⬇️ 下载结果 (含资源)” 保存文件。

3. 还原图片

1. 打开混淆图：将之前保存的 PNG 拖入主区域。
2. 设置偏移：输入生成该混淆图时使用的偏移量。
3. 执行还原：点击 “🔓 还原图片” 按钮恢复原图。

4. 添加资源 (隐写)

1. 上传资源：点击左侧 “+ 上传资源文件” 或直接将文件拖入右侧瀑布流区域。
2. 管理资源：
   • 点击瀑布流中的卡片可全屏预览。
   • 悬停在卡片右上角可点击删除。
3. 打包下载：无论是否进行了混淆操作，点击下载按钮时，系统会将当前显示的图片与资源列表中的所有文件打包进一个新的 PNG。

---

📂 项目结构

本项目采用单文件架构，所有逻辑包含在 index.html 中。