图像加载与预处理:
- 用户上传图片后，使用 FileReader 将其读取为 Data URL。
- 创建一个 Image 对象加载该 URL。
网格划分:
- 根据用户选择的"精细度"(granularity) 确定像素画在宽度方向上的格子数量 N。
- 根据原图的宽高比计算高度方向的格子数量 M = round(N * height / width)，确保 M 至少为 1。
平均颜色计算:
- 在内存中创建一个隐藏的 Canvas (originalCanvasRef)，并绘制原始图片。
- 遍历 N x M 网格中的每一个单元格。
- 对于每个单元格，计算其在原图上对应的像素区域。
- 使用 originalCtx.getImageData() 获取该区域内所有像素的 RGBA 数据。
- 计算该区域内所有不完全透明（例如，Alpha > 128）像素的平均 RGB 值。忽略 Alpha 值本身用于颜色距离计算，只关注颜色本身。如果单元格内所有像素都透明，则将其视为默认颜色（如白色 T1）。
颜色映射 (关键步骤):
- 调色板: 项目代码中预先定义了一个 beadPalette 数组，包含每个拼豆颜色的 Key (如 "H7")、Hex 值 (如 "#000000") 和预计算的 RGB 值。
- 查找最近色: 对于上一步计算出的每个单元格的平均 RGB 值 (avgRgb)，调用 findClosestPaletteColor 函数。
- 距离度量: 该函数遍历 beadPalette 中的所有颜色，使用欧氏距离计算 avgRgb 与调色板中每个颜色 RGB 值之间的距离： [ d = \sqrt{(R_{avg}-R_{palette})^2 + (G_{avg}-G_{palette})^2 + (B_{avg}-B_{palette})^2} ]
- 匹配: 选择欧氏距离最小的那个调色板颜色作为该单元格的最终映射结果。
- 存储结果: 将每个单元格匹配到的拼豆 Key 和 Hex 颜色存储在一个二维数组状态 mappedPixelData 中。
生成预览图:
- 获取页面上可见的 Canvas (pixelatedCanvasRef) 的上下文 pixelatedCtx。
- 遍历 mappedPixelData。
- 对于每个单元格，使用其映射后的拼豆颜色 (mappedPixelData[j][i].color) 填充对应的矩形区域。
- 在每个填充的色块上绘制浅灰色细边框，形成网格线效果。
- 注意: 预览图上不绘制颜色 Key，仅显示颜色和网格。
生成带 Key 的下载图纸 (handleDownloadImage):
- 用户点击"下载图纸 (带 Key)"按钮时触发。
- 动态创建新的、临时的 Canvas (downloadCanvas)。
- 定义一个固定的单元格渲染尺寸 downloadCellSize（例如 30 像素），确保足够容纳文字。
- 设置 downloadCanvas 的尺寸为 (N * downloadCellSize) x (M * downloadCellSize)。
- 获取其上下文 ctx 并设置 ctx.imageSmoothingEnabled = false 以保证像素块和文字的清晰度。
- 遍历 mappedPixelData：
  - 使用映射后的拼豆颜色填充 downloadCellSize x downloadCellSize 的背景矩形。
  - 绘制灰色细边框。
  - 使用 getContrastColor 函数（基于亮度计算）选择与背景色对比度高的文字颜色（黑色或白色）。
  - 在单元格中央绘制对应的拼豆颜色 Key (mappedPixelData[j][i].key)。
- 使用 downloadCanvas.toDataURL('image/png') 生成图片数据并触发下载。
生成 JSON 数据 (handleDownloadJson):
- 用户点击"下载数据 (JSON)"按钮时触发。
- 从 mappedPixelData 提取出一个只包含颜色 Key 的二维数组 keyGrid。
- 将 keyGrid 序列化为格式化的 JSON 字符串。
- 创建 Blob 对象并生成可下载的 .json 文件。

调色板数据

拼豆的颜色数据定义在 src/app/page.tsx 文件顶部的 beadPaletteData 对象中。该数据由用户提供，并预处理为包含 Key、Hex 和 RGB 值的 beadPalette 数组。

重要: 调色板数据的准确性直接影响最终的颜色映射结果。请在使用前仔细核对 Key 和 Hex 值。如有需要，可以直接修改 beadPaletteData 来添加、删除或修改颜色。

本地开发

克隆项目:

git clone <repository-url>
cd perler-beads-generator

安装依赖:

npm install
# or yarn install or pnpm install

启动开发服务器:
```
npm run dev
# or yarn dev or pnpm dev
```
在浏览器中打开 http://localhost:3000。

部署

该项目可以轻松部署到 Vercel 平台：

将代码推送到 GitHub/GitLab/Bitbucket 仓库。
在 Vercel 上导入该 Git 仓库。
Vercel 会自动识别 Next.js 项目并进行部署。

未来可能的改进

颜色距离算法: 使用更符合人类视觉感知的颜色距离算法，如 CIEDE2000 (Delta E)，以获得更精确的颜色匹配（但这会显著增加计算复杂度）。
性能优化: 对于超大图片或极高精细度，考虑使用 Web Workers 将图像处理和颜色计算移到后台线程，防止 UI 卡顿。
调色板管理: 提供 UI 界面允许用户上传、编辑或选择不同的调色板。
预览交互: 在预览图上悬停显示颜色 Key 或统计颜色用量。

许可证

Apache 2.0

README.md Unescape Escape

拼豆底稿生成器

功能特点

技术实现

核心算法：像素化与颜色映射

调色板数据

本地开发

部署

未来可能的改进

许可证

README.md