【免费下载链接】perler-beads
拼豆底稿生成器 (Perler Beads Generator)
perler-beads 是一个开源的拼豆底稿生成器：上传任意图片，即可自动输出带色号标注的拼豆图纸和采购清单。它的「颜色排除与自动重映射」功能解决了拼豆党最常见的头疼问题——图纸里出现了一两个你根本没有、也不想要的色号。只需要点击排除，算法就会自动把这些区域替换成最相近的可用颜色，本文带你从使用和实现两个层面看懂它。
为什么拼豆图纸会出现没用的色号？
生成拼豆图纸时，以下情况几乎不可避免：
- 🎨 色板越大颜色越多，某些颜色可能只被用到了 1～2 粒，却要多买一整袋
- 🛒 手头色豆不全，希望把缺的颜色替换成已有的相近色
- 👀 两个相邻颜色在成品上肉眼几乎无差别，不如合并掉
手动逐个像素改色不现实（一张图动辄上千格），perler-beads 的做法是：一键排除 + 自动重映射，排除一个色号，整图相关区域瞬间完成替换。
三步一键排除用不到的色号
- 上传图片生成图纸：像素化完成后，页面下方会出现「去除杂色」颜色统计面板，列出当前图纸中所有出现的颜色及用量（总计多少颗）
- 点击颜色即可排除：点击任意一行颜色，该颜色立即被排除——面板中显示为红色背景加删除线，图纸预览中原本使用该颜色的区域自动换成最相近的可用色
- 排除错了随时恢复：展开「已排除的颜色 (N)」折叠区，可以逐个点击「恢复」，也可以「一键恢复所有颜色」
💡 如果你把颜色全部排除完，页面会弹出黄色警示条提示"当前可用颜色过少或为空"，并提供按钮直接跳转到已排除颜色列表，方便快速恢复。
这套面板的界面代码位于 src/app/page.tsx，颜色排除的完整交互逻辑（点击排除 / 点击恢复）实现在 src/app/page.tsx 的handleToggleExcludeColor函数中。
自动重映射算法五步拆解：替换色是怎么选出来的？
排除颜色远不是"把格子换个颜色"这么简单。perler-beads 用一条精心设计的流水线，保证替换结果既自然、又不引入新的颜色。
① 先给图纸"拍照"：记录初始颜色集合
图片经过「像素化 → 区域颜色合并 → 背景移除」完整处理后，系统会把网格中实际出现的所有颜色记录进一个名为initialGridColorKeys的集合。
这个"初始颜色快照"是整个排除算法的地基——后面所有替换色，都只允许从这份"原始名单"里挑选。记录动作见 src/app/page.tsx。
② 圈定候选范围：只从"图中已有颜色"里挑
当你点击排除颜色 X 时，系统先算出一个候选集合：
候选集合 = 初始颜色集合 − 被排除的颜色X − 其他已被排除的颜色然后用这个候选集合过滤完整色板，得到"重映射目标调色板"（remapTargetPalette），对应代码在 src/app/page.tsx。
🎯核心设计：为什么不直接在整个 291 色色板里找最近色？因为排除颜色的目的正是减少颜色种类。如果替换色引入了图纸里原本不存在的颜色，就等于"排了一个、又加了一个"，色号数量不降反升，采购清单也白做了。
③ 找最相近的颜色：Oklab 感知色空间
候选调色板确定后，系统遍历网格中所有非背景单元格，对每个正在使用被排除颜色的格子，调用findClosestPaletteColor在目标调色板里找颜色距离最小的颜色，并把格子的色号与色值替换过去。
这里的"颜色距离"不是简单的 RGB 数值相减，而是先在Oklab 感知色空间中计算：RGB 先做 sRGB 线性化并转换到 Oklab，再求欧氏距离乘以 100。Oklab 对颜色差异的度量更接近人眼感知，因此替换出来的颜色观感更自然、不会出现"数值近但看起来怪"的情况。
- 颜色距离函数：src/utils/pixelation.ts
- 最近色查找函数：src/utils/pixelation.ts
④ 安全检查：防止图纸"无颜色可用"
🛡️ 如果排除 X 并扣除其他已排除颜色后，候选集合变空了，说明整个图将没有任何颜色可映射——此时系统会阻止这次排除并提示：
无法排除颜色 XXXX，因为图中最初存在的其他可用颜色也已被排除。请先恢复部分其他颜色。
这一步从机制上杜绝了"把图排除到无法渲染"的极端状态。
⑤ 排除与恢复的非对称策略
两种操作的代价完全不同，perler-beads 为此采用了差异化处理：
| 操作 | 内部策略 | 特点 |
|---|---|---|
| 排除颜色 | 局部重映射：只替换使用被排除色的单元格，并即时重算颜色统计 | ⚡ 秒级响应，不动其他格子 |
| 恢复颜色 | 触发remapTrigger，重跑完整流水线（像素化 → 颜色合并 → 背景移除） | 🔄 回到最干净的全局结果 |
排除完成后，每种颜色的粒数与总颗数会自动重新统计，采购清单始终与图纸保持同步。
几个值得留意的实现细节
- 背景格子永不参与重映射：经洪水填充标记为"外部"（
isExternal）的背景格会被跳过，排除颜色不会破坏背景移除结果 - 内部用 hex 色值，展示才转色号：排除、统计全程以 hex 值作为键，展示层才按当前品牌体系（MARD / COCO / 漫漫 / 盼盼 / 咪小窝）翻译色号，因此切换品牌不影响排除状态。291 种标准颜色与 5 大品牌的映射数据在 src/app/colorSystemMapping.json
- 状态卫生：排除/恢复颜色会自动退出手动着色模式并清空编辑历史，避免手动改色与自动重映射状态冲突
- 排除后导出：最终图纸与采购清单 PNG 由 src/utils/imageDownloader.ts 生成，统计的正是排除重映射之后的最新数据
本地运行 perler-beads 亲自体验颜色排除
git clone https://gitcode.com/gh_mirrors/pe/perler-beads cd perler-beads npm install npm run dev浏览器打开http://localhost:3000，上传任意图片，在「去除杂色」面板点一点，即可直观感受颜色排除与自动重映射的效果。更多算法细节与 Roadmap（如 CIEDE2000 色差、Floyd-Steinberg 抖动）可参考 README.md 与 CLAUDE.md。
📌小结：perler-beads 的颜色排除功能看似只是"点一下删掉一个色号"，背后却是一条完整的算法链路——初始颜色快照、候选集合收敛、Oklab 感知距离、空调色板防护、排除/恢复差异化处理。想让自己的拼豆图纸用色更少、采购更省？这个功能值得每个拼豆玩家用起来。
【免费下载链接】perler-beads
拼豆底稿生成器 (Perler Beads Generator)
相关推荐
LiveKit Safari AV1 兼容完整指南：服务端 3 个自动适配机制解决画面冻结
LiveKit Safari AV1 兼容完整指南：服务端 3 个自动适配机制解决画面冻结 你在 Safari 上发起视频通话，画面卡顿，甚至直接黑屏。十有八九
heatmap.js热力图颜色映射算法：从HSV到RGB转换
heatmap.js热力图颜色映射算法：从HSV到RGB转换 热力图颜色映射的技术痛点与解决方案 你是否曾为热力图颜色过渡不自然而困扰？是否在实现自定义色阶时遇
前端数据可视化图表库FreeRTOS 实时操作系统新手指南：从克隆仓库到第一个多任务示例
FreeRTOS 实时操作系统新手指南：从克隆仓库到第一个多任务示例 当你需要在一颗小 MCU 上同时轮询传感器、收发串口、按节拍喂看门狗时，FreeRTOS
操作系统嵌入式物联网RTOS
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
