Citizen - 高级图像抖动处理工具

Citizen 是一个强大的图像处理工具，专注于实现各种高级抖动（Dithering）算法，可以将图像转换为具有艺术效果的半色调图像。

主要功能

1. 抖动算法

• 无抖动 (None): 保持原始图像
• 拜耳抖动 (Bayer): 使用拜耳矩阵进行抖动处理
• Floyd-Steinberg 抖动: 实现经典的误差扩散算法
• Atkinson 抖动: 使用 Atkinson 算法进行抖动处理
• 蓝噪声抖动 (Blue Noise): 使用蓝噪声模式进行抖动
• 半色调 (Halftone): 模拟传统印刷的半色调效果

2. 图像调整

• 对比度调整: 可以调整图像的对比度
• 亮度调整: 可以调整图像的亮度
• 颜色映射: 支持自定义两种颜色进行映射

3. 特殊功能

• 电源模式: 支持开启/关闭特殊效果
• 实时预览: 所有调整都可以实时预览
• 图像上传: 支持本地图片上传处理
• 导出功能: 可以导出处理后的图像

技术实现

核心算法

• 使用 Canvas API 进行图像处理
• 实现了多种抖动算法的 TypeScript 实现
• 使用 Three.js 进行 3D 预览渲染

状态管理

• 使用自定义 Hook 管理应用状态
• 实现了图像纹理的状态管理
• 支持处理进度的实时更新

使用方法

1. 上传图片

   • 点击上传按钮选择本地图片
   • 支持常见图片格式（PNG、JPG等）

2. 选择算法

   • 从下拉菜单选择所需的抖动算法
   • 可以实时预览不同算法的效果

3. 调整参数

   • 使用滑块调整对比度和亮度
   • 选择或自定义颜色映射
   • 调整拜耳抖动的级别（如果使用拜耳抖动）

4. 导出结果

   • 点击导出按钮保存处理后的图片
   • 支持复制到剪贴板功能

开发说明

文件结构

• AdvancedDithering.tsx: 主组件实现
• algo.ts: 算法实现
• PlayCanvas.tsx: 3D 预览组件
• useStore.ts: 状态管理
• page.tsx: 页面入口
• layout.tsx: 布局组件

依赖项

• Three.js: 3D 渲染
• React: UI 框架
• TypeScript: 类型支持
• Lucide Icons: 图标库

注意事项

1. 处理大图片时可能需要较长时间
2. 某些算法（如蓝噪声）需要额外的资源文件
3. 建议使用现代浏览器以获得最佳体验

贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目。

许可证

MIT License