【奇象巡展 · 巡展像素】

为《明日方舟》「奇象巡展·巡展像素」活动定制：将任意影像凝练为 24 × 24 像素展品，可选采样工艺与调色方案，一键导出 PNG。

一个纯静态、零依赖、完全在浏览器本地运行的像素画生成工具。不需要任何构建步骤，打开 index.html 即可使用。

---

✨ 功能一览

• 多种呈交方式：拖拽 / 点击选取 / Ctrl+V 直接粘贴影像
• 固定 24×24 展品规格，支持坐标轴定位（上 1-24、左 a-x）
• 五种采样工艺
  • 最近邻（锐利轮廓）
  • 区域平均（柔和过渡）
  • 中心加权（细节聚焦）
  • PerfectPixel 多数投票（纯净色块）
  • PerfectPixel 中位数（抗噪）
• 三种调色方案
  • 官方色域（活动官方 40 色映射，默认）
  • 原色（完整色域）
  • 灰度（黑白映像）
• 像素级交互
  • 悬停检色（实时浮层）
  • 色卡按覆盖面积排序、点选过滤
  • 像素网格开关
  • 自由拖动分栏（展品 / 原始影像 / 色彩档案）
• 导出
  • 多倍率导出 PNG（×1 / ×5 / ×10 / ×20）
  • 可选是否包含像素网格
  • 一键复制色卡
• 体验细节
  • 自适应浅 / 深双主题（跟随系统 + 手动切换，记忆偏好）
  • 下拉展开动画、参数变更自动重绘
  • 键盘可操作性（焦点管理）与无障碍标注

---

🚀 快速开始

本项目是纯静态前端，无需安装依赖、无需构建。

方式一：直接打开

用浏览器打开 index.html 即可开始使用。

方式二：本地静态服务器（推荐）

若希望以更接近线上环境的方式运行，可在项目根目录启动任意静态服务器，例如：

# Python
python -m http.server 8000
# 然后访问 http://localhost:8000

# Node.js (需已安装 npx)
npx serve .

提示：由于浏览器安全限制，若通过 file:// 直接打开可能在某些场景受限，本地静态服务器是最稳妥的运行方式。

---

🧭 使用指南

1. 将一张影像拖入展台、点击选取，或复制图片后直接 Ctrl+V 粘贴。
2. 在控制台选择采样工艺与调色方案，展品会随参数自动重绘（也可手动点「重新绘制」）。
3. 将鼠标悬停在展品像素上检色，或在色彩档案中点选颜色进行过滤。
4. 打开「导出展品」，选择倍率与是否包含网格，即可导出 PNG；也可一键复制色卡。

---

🛠 技术栈

层	技术
结构	原生 HTML5（语义化标签 + ARIA 无障碍）
样式	原生 CSS3（自定义属性 / 变量驱动主题、Flexbox、响应式）
逻辑	原生 JavaScript（Canvas 2D 像素处理，无框架）
依赖	零依赖、零构建

---

🧩 PerfectPixel 采样工艺

PerfectPixel 多数投票 / 中位数两种采样工艺移植自开源项目 theamusing/perfectPixel （MIT License，作者 theamusing）。该项目用于把 AI 生成的"杂乱像素画" 细化为干净、对齐网格的完美像素。

其核心为三步算法：

1. 网格尺寸检测 —— 从图像 FFT 幅度谱估计像素网格大小；
2. 网格边缘对齐 —— 用 Sobel 梯度投影把网格线对齐到像素边界；
3. 网格采样 —— 按格子以 center / median / majority 策略取代表色。

本项目将其移植为浏览器端 JavaScript（js/perfectPixel.js），并针对固定 24×24 网格做了适配：

• 网格尺寸已知（24×24），故省略第 1 步的 FFT 检测；
• 完整移植第 3 步的 多数投票（格子内 2-means 聚类取多数簇，输出纯净色块）与 中位数（每通道取中位数，抗噪）两种采样策略；
• 移植第 2 步的 网格边缘对齐（Sobel 投影 + 网格线吸附），作为可选开关。由于 其搜索半径有限（±0.25 格宽），对普通照片收益有限，故默认关闭。

实测：在"色块 + 椒盐噪声"场景，中位数采样可近乎完美还原（误差趋近 0），多数投票 的还原误差仅为区域平均的约 40%，明显优于原有采样工艺。

---

📁 项目结构

PixEXHIBITION/
├── index.html            # 页面结构（展台 / 控制台 / 色彩档案 / 关于弹窗）
├── css/
│   └── style.css         # 全部样式（含浅/深主题变量）
├── js/
│   ├── main.js           # 主逻辑：影像读取、采样、渲染、交互、导出
│   └── perfectPixel.js   # PerfectPixel 采样工艺（多数投票 / 中位数）
└── .gitignore            # 忽略构建产物与编辑器/系统杂项

---

🔒 隐私说明

所有影像仅在您的终端本地处理，不会上传至任何服务器；关闭页面后不留痕迹。

---

🤖 AI 生成声明

本项目（index.html、css/、js/ 等）由 AI 助手 泠叁（DeepSeek V4 Flash 0731） 在人类设计者 泠曦 的指导与评审下生成、迭代与维护。AI 生成代码遵循 MIT 许可证开源， 不附加任何额外使用限制。

备注：其中 PerfectPixel 采样工艺移植自开源项目 theamusing/perfectPixel （MIT License），该部分版权归原作者 theamusing 所有。

---

🙏 制作与致谢

• 设计：泠曦
• AI 生成与协助：泠叁（DeepSeek V4 Flash 0731）
• 献给「奇象巡展」—— 愿每一格像素都有温度。

---

📄 许可

本项目（除特别注明外）采用 MIT License 开源，完整协议文本见 LICENSE。

你被允许自由使用、复制、修改、合并、发布、分发、再许可和/或销售本软件的副本， 唯一要求是在所有副本中保留上述版权与许可声明。

其中 PerfectPixel 相关代码（js/perfectPixel.js）移植自 theamusing/perfectPixel， 该部分版权归原作者 theamusing 所有，遵循其声明的 MIT License。