# LX_IMG_Confusion

**Repository Path**: ikaros-521/LX_IMG_Confusion

## Basic Information

- **Project Name**: LX_IMG_Confusion
- **Description**: 纯前端图片混淆反混淆
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-12-12
- **Last Updated**: 2026-01-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 图片混淆工具

基于Gilbert空间填充曲线的新一代图片混淆工具，能够在保持像素空间相关性的同时混淆图片内容。混淆后的图片即使被压缩仍能保持色彩特性。

## ✨ 项目特点

- **创新的混淆算法**：基于Gilbert空间填充曲线实现像素重排
- **空间相关性保持**：混淆过程中保持像素的空间关联性
- **压缩友好**：混淆后的图片压缩后仍能保持良好的色彩特性
- **多平台支持**：纯前端实现，可在任何现代浏览器中运行
- **简洁直观的界面**：易于使用的操作体验

## 🛠️ 技术原理

### Gilbert空间填充曲线

该工具的核心算法基于**Gilbert空间填充曲线**，这是一种能够填充任意大小矩形区域的连续曲线。与传统的Hilbert曲线相比，Gilbert曲线能够更好地适应非正方形的矩形区域。

```javascript
// Gilbert 2D 空间填充曲线算法核心实现
generate2d(x, y, ax, ay, bx, by, coordinates) {
    const w = Math.abs(ax + ay);
    const h = Math.abs(bx + by);
    // ... 算法实现 ...
}
```

### 混淆机制

图片混淆过程主要包括以下步骤：

1. 将原始图片加载到Canvas中
2. 通过Gilbert曲线生成像素遍历顺序
3. 根据斐波那契数列比例计算偏移量
4. 按照混淆映射关系重新排列像素
5. 导出处理后的图片

解混淆过程则是混淆过程的逆操作，使用相同的偏移量和映射关系还原原始图片。

## 🚀 使用方法

### 基本操作

1. **选择图片**：点击"选择图片"按钮上传本地图片文件
2. **混淆图片**：点击"混淆"按钮对图片进行混淆处理
3. **解混淆图片**：点击"解混淆"按钮还原混淆后的图片
4. **反相图片**：点击"反相"按钮对图片颜色进行反转
5. **还原图片**：点击"还原"按钮恢复到原始上传的图片

### 图片信息显示

上传图片后，右侧信息栏会显示图片的相关信息：
- 尺寸（像素）
- 文件大小
- 图片格式
- 处理状态

## 📁 项目结构

```
├── index.html      # 主页面结构
├── script.js       # 核心功能实现
└── style.css       # 样式表
```

### 核心功能模块

1. **图片加载与处理**：负责图片的上传、验证和基本信息获取
2. **Gilbert曲线生成器**：实现空间填充曲线算法
3. **混淆/解混淆引擎**：基于曲线映射关系实现图片像素重排
4. **用户界面交互**：处理按钮点击、显示提示信息等

## ⚠️ 注意事项

- 目前仅支持小于10MB的图片文件
- 处理后的图片统一保存为JPEG格式，质量为0.95
- 混淆和解混淆操作需要使用相同的算法参数，请确保在同一页面内完成
- 仅供技术交流使用

## 🔧 技术栈

- HTML5 (Canvas API)
- JavaScript (ES6+)
- CSS3 (Flexbox, Grid, 动画效果)

## 📋 许可证

本项目仅供技术交流使用，遵循开源精神。

## 🤝 贡献说明

欢迎对项目提出改进建议或提交代码贡献。如有问题或想法，请随时提出。