Spectra - 图片像素颜色提取工具

从图片中智能提取像素颜色，支持相似度分组与多格式导出。

---

网页版

基于纯前端技术的在线颜色提取工具，无需安装，打开即用。

功能特性

• 拖拽上传：支持拖拽图片到页面或点击选择，支持 JPEG、PNG、HEIC/F 等格式
• 智能颜色分组：通过容差滑块控制颜色相似度合并粒度（0~50 档位可调）
• Web Worker 异步处理：大图处理不阻塞 UI，流畅不卡顿
• 实时进度反馈：两阶段进度条（提取颜色 → 分组分类），处理状态一目了然
• 统计面板：显示像素总数、原始颜色数、分组后组数、处理耗时
• 多格式导出：支持 TXT / JSON / CSV 三种导出格式
• 动画效果：可开关的 UI 动画，视觉体验更佳
• 颜色色块展示：结果以直观的色块网格呈现，每个颜色附带色值信息

技术栈

技术	用途
HTML5 Canvas	像素数据读取
Web Worker	异步后台处理
CSS3	界面样式与动画
原生 JavaScript	核心逻辑

文件结构

网页版/
├── index.htm          # 主页面
├── style.css          # 样式表
├── script.js          # 主逻辑（UI 交互、导出等）
├── color-worker.js    # Web Worker 异步处理（主要功能）

使用方式

1. 用任意 HTTP 服务器托管 网页版/ 目录（如 VS Code Live Server 或 python -m http.server）
2. 浏览器打开 index.htm
3. 拖入或选择一张图片
4. 调节容差滑块，点击「开始提取」
5. 选择导出格式，点击「导出结果」

---

Python 版

基于 Tkinter 的桌面 GUI 工具，适合本地批量处理超大图片。

功能特性

• 图形化界面：基于 Tkinter 的完整桌面应用
• 超大图片支持：解除 Pillow 像素限制，可处理 GB 级图片
• 图片预览：自动生成缩略图预览
• 颜色相似度分组：容差档位可调（0/12/25/38/50），支持「仅完全相同颜色」模式
• 分组详情导出：可选是否在导出时显示每组的完整颜色列表
• 多格式导出：支持 Text / JSON / CSV 三种格式
• 进度条显示：处理进度实时反馈
• 处理可中断：支持随时停止处理
• Windows DPI 适配：自动适配高 DPI 显示

工具脚本

• csv_to_html.py：将 CSV 颜色文件转换为可视化 HTML 色块页面，方便预览

技术栈

技术	用途
Python 3	运行环境
Tkinter	GUI 框架
Pillow (PIL)	图片处理
NumPy	数值计算加速

依赖安装

pip install pillow numpy

文件结构

Python/
├── main.py            # 主程序（GUI 桌面应用）
└── csv_to_html.py     # CSV 转 HTML 色块页面工具

使用方式

主程序

python main.py

1. 点击「浏览」选择图片
2. 调节容差档位滑块
3. 选择输出格式（Text / JSON / CSV）
4. 点击「开始提取」
5. 点击「导出结果」保存文件

CSV 转 HTML

python csv_to_html.py 颜色文件.csv

将导出物 CSV 文件转换为带色块预览的 HTML 页面。

---

版本对比

特性	网页版	Python 版
运行环境	浏览器	Python 3
安装依赖	无需	pillow + numpy
超大图片	受浏览器限制	支持 GB 级
导出格式	TXT / JSON / CSV / CSS	Text / JSON / CSV
异步处理	Web Worker	多线程
拖拽上传	✅	❌
动画效果	✅	❌
使用场景	快速在线使用	本地批量处理

---

原理说明

1. 像素提取：逐像素读取图片的 RGBA 值，统计每种颜色的出现次数
2. 颜色分组：使用欧几里得距离计算颜色之间的相似度，将距离小于容差值的颜色合并为同一组
3. 代表色选取：每组取出现次数最多的颜色作为代表色
4. 结果导出：按出现次数降序排列，输出颜色值及其统计信息