一个基于 Web 的工具，可以将普通图片转换为适配特定拼豆调色板的像素画图纸。用户可以上传图片，调整像素化粒度、颜色合并阈值，选择预设色板，排除特定颜色，预览效果，并下载带有颜色编码的图纸和用量统计图。
- 图片上传: 支持拖放或点击选择 JPG/PNG 图片。
- 智能像素化:
- 可调粒度: 通过滑块控制像素画的横向格子数量。
- 颜色合并: 通过滑块调整相似颜色的合并阈值，平滑色块区域。
- 多色板支持:
- 提供多种预设拼豆色板 (如 168色, 144色, 96色等) 可供选择。
- 根据所选色板进行颜色映射。
- 颜色排除与管理:
- 在颜色统计列表中点击可排除/恢复特定颜色。
- 排除颜色后，原使用该颜色的区域将智能重映射到邻近的可用颜色。
- 提供一键恢复所有排除颜色的功能。
- 实时预览:
- 即时显示处理后的像素画预览。
- 悬停/长按交互: 在预览图上悬停（桌面）或长按（移动）可查看对应单元格的颜色编码 (Key) 和颜色。
- 自动识别并标记外部背景区域（预览时显示为浅灰色）。
- 下载成品:
- 带 Key 图纸: 下载带有清晰颜色编码 (Key) 和网格线的 PNG 图纸，忽略外部背景。
- 颜色统计图: 下载包含各颜色 Key、色块、所需数量的 PNG 统计图。
- 框架: Next.js (React) 与 TypeScript
- 样式: Tailwind CSS 用于响应式布局和样式。
- 核心逻辑: 浏览器端 Canvas API 用于图像处理、颜色分析和绘制。
- 状态管理: React Hooks (
useState,useRef,useEffect,useMemo)。
应用程序的核心是将图像转换为像素网格，并将颜色精确映射到有限的拼豆调色板，同时进行平滑和背景处理。
-
图像加载与网格划分:
- 加载用户上传的图片。
- 根据用户选择的"粒度"(
granularity, N) 和原图宽高比确定N x M的网格尺寸。
-
初始颜色映射 (基于主导色):
- 遍历
N x M网格。 - 对每个单元格，在原图对应区域内找出出现频率最高的像素 RGB 值 (Dominant Color)（忽略透明/半透明像素）。
- 使用欧氏距离在 RGB 空间中，将该主导色映射到当前选定且未被排除的调色板 (
activeBeadPalette) 中最接近的颜色。 - 记录每个单元格的初始映射色号和颜色 (
initialMappedData)。
- 遍历
-
区域颜色合并 (基于相似度):
- 使用广度优先搜索 (BFS) 遍历
initialMappedData。 - 识别颜色相似（欧氏距离小于
similarityThreshold）的连通区域。 - 找出每个区域内出现次数最多的珠子色号。
- 将该区域内所有单元格统一设置为这个主导色号对应的颜色，得到初步平滑结果 (
mergedData)。
- 使用广度优先搜索 (BFS) 遍历
-
背景移除 (基于边界填充):
- 定义一组背景色号 (
BACKGROUND_COLOR_KEYS, 如 T1, H1)。 - 从
mergedData的所有边界单元格开始，使用洪水填充 (Flood Fill) 算法。 - 标记所有从边界开始、颜色属于
BACKGROUND_COLOR_KEYS且相互连通的单元格为"外部背景" (isExternal = true)。
- 定义一组背景色号 (
-
颜色排除与重映射:
- 当用户排除某个颜色
key时：- 确定一个重映射目标调色板：包含网格中最初存在的、且当前未被排除的所有颜色。
- 如果目标调色板为空（表示排除此颜色会导致没有有效颜色可用），则阻止排除。
- 否则，将
mappedPixelData中所有使用key的非外部单元格，重新映射到目标调色板中的最近似颜色。
- 当用户恢复颜色时，触发完整的图像重新处理流程（步骤 1-4）。
- 当用户排除某个颜色
-
生成预览图与下载文件:
- 预览图: 在 Canvas 上绘制
mergedData，根据isExternal状态区分内部颜色和外部背景（浅灰），并添加网格线。支持悬停/长按显示色号。 - 带 Key 图纸下载: 创建临时 Canvas，绘制
mergedData中非外部背景的单元格，填充颜色、绘制边框，并在中央标注颜色 Key。 - 统计图下载: 统计
mergedData中非外部背景单元格的各色号数量，生成包含色块、色号、数量的列表式 PNG 图片。
- 预览图: 在 Canvas 上绘制
预设的拼豆调色板数据定义在 src/app/beadPaletteData.json 文件中。不同的色板组合 (如 168色、96色等) 在 src/app/page.tsx 的 paletteOptions 中定义。
- 克隆项目:
git clone https://github.com/Zippland/perler-beads.git cd perler-beads - 安装依赖:
npm install # or yarn install or pnpm install - 启动开发服务器:
npm run dev # or yarn dev or pnpm dev - 在浏览器中打开
http://localhost:3000。
该项目可以轻松部署到 Vercel 等支持 Next.js 的平台。
- 颜色映射算法: 探索如 K-Means 聚类或使用 CIEDE2000 (Delta E) 颜色距离进行映射，可能获得更优的视觉效果（但计算成本更高）。
- 抖动 (Dithering): 添加抖动选项（如 Floyd-Steinberg），在有限调色板下模拟更丰富的颜色过渡。
- 性能优化: 对非常大的图片或高粒度设置，考虑使用 Web Workers 进行后台计算。
- 用户自定义调色板: 允许用户上传或创 5960 建自己的调色板。
- UI/UX 增强: 如更直观的区域选择、颜色替换工具等。
Apache 2.0