ColorView 是一个帮助用户理解色盲和色弱人士视觉体验的交互式 Web 应用。通过实时摄像头预览或图片上传，用户可以对比正常视觉与不同类型色盲视觉的差异。

• 📷 实时摄像头预览 - 使用摄像头实时查看色盲模拟效果
• 🖼️ 图片上传处理 - 上传任意图片进行色盲滤镜处理
• 👁️ 8 种视觉模式 - 支持正常视觉、红色盲/弱、绿色盲/弱、蓝色盲/弱、全色盲
• 📊 实时对比 - 左右分屏对比原图与滤镜效果
• 💾 截图保存 - 保存处理后的图片
• 📱 响应式设计 - 支持桌面和移动设备
• 🔬 算法验证 - 基于学术界的标准 LMS 颜色空间转换算法

👉 Vercel: https://colorview.vercel.app (国外访问) 👉 Cloudflare: 查看部署指南 (国内访问)

1. 克隆仓库

git clone https://github.com/yourusername/ColorView.git
cd ColorView

2. 启动本地服务器

# 使用 Python
python3 -m http.server 8000

# 或使用 Node.js
npx serve

# 或使用 PHP
php -S localhost:8000

3. 在浏览器中打开 http://localhost:8000

1. 点击"🔴 实时预览模式"按钮
2. 允许浏览器访问摄像头
3. 选择不同的色盲类型查看实时效果
4. 点击"📸 截图保存"保存当前画面

1. 上传图片或使用"📷 使用摄像头"拍照
2. 选择不同的色盲类型
3. 对比左侧原图和右侧滤镜效果
4. 点击"💾 下载当前图片"保存结果

本项目基于 Machado et al. (2009) 的学术论文 "A Physiologically-based Model for Simulation of Color Vision Deficiency" 实现色盲模拟。

1. RGB → LMS 转换：将 sRGB 颜色转换到 LMS 颜色空间（Long, Medium, Short 波长）
2. 应用色盲模拟：根据不同类型的色盲，调整 LMS 值
3. LMS → RGB 转换：将模拟后的 LMS 值转换回 sRGB

查看 algorithm-test.html 了解算法验证详情和理论正确性检查。

• HTML5 - 页面结构
• CSS3 - 样式和响应式设计
• JavaScript (ES6+) - 核心逻辑
• Canvas API - 图像处理
• WebRTC - 摄像头访问

ColorView/
├── index.html              # 主页面
├── style.css               # 样式文件
├── script.js               # 核心逻辑
├── algorithm-test.html     # 算法验证页面
├── README.md               # 项目说明
└── .gitignore              # Git 忽略配置

• ⚡ 零依赖 - 纯原生 JavaScript，无需框架
• 🎯 高性能 - 使用 Canvas API 和 requestAnimationFrame 优化
• 🔒 隐私保护 - 所有处理在本地完成，不上传任何数据
• 🌐 离线可用 - 可作为静态网站部署，支持 PWA

本项目采用 MIT 许可证 - 详见 LICENSE 文件

欢迎提交 Issue 和 Pull Request！

如有问题或建议，请提交 Issue

• 算法基于 Machado et al. 的研究论文
• 感谢所有为色盲友好设计做出贡献的开发者