【免费下载链接】perler-beads拼豆底稿生成器 (Perler Beads Generator)项目地址https://gitcode.com/gh_mirrors/pe/perler-beads点击查看免费下载perler-beads 是一个开源的拼豆底稿生成器上传任意图片即可自动输出带色号标注的拼豆图纸和采购清单。它的「颜色排除与自动重映射」功能解决了拼豆党最常见的头疼问题——图纸里出现了一两个你根本没有、也不想要的色号。只需要点击排除算法就会自动把这些区域替换成最相近的可用颜色本文带你从使用和实现两个层面看懂它。为什么拼豆图纸会出现没用的色号生成拼豆图纸时以下情况几乎不可避免 色板越大颜色越多某些颜色可能只被用到了 12 粒却要多买一整袋 手头色豆不全希望把缺的颜色替换成已有的相近色 两个相邻颜色在成品上肉眼几乎无差别不如合并掉手动逐个像素改色不现实一张图动辄上千格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)项目地址https://gitcode.com/gh_mirrors/pe/perler-beads点击查看免费下载相关推荐LiveKit Safari AV1 兼容完整指南服务端 3 个自动适配机制解决画面冻结LiveKit Safari AV1 兼容完整指南服务端 3 个自动适配机制解决画面冻结 你在 Safari 上发起视频通话画面卡顿甚至直接黑屏。十有八九heatmap.js热力图颜色映射算法从HSV到RGB转换heatmap.js热力图颜色映射算法从HSV到RGB转换 热力图颜色映射的技术痛点与解决方案 你是否曾为热力图颜色过渡不自然而困扰是否在实现自定义色阶时遇前端数据可视化图表库FreeRTOS 实时操作系统新手指南从克隆仓库到第一个多任务示例FreeRTOS 实时操作系统新手指南从克隆仓库到第一个多任务示例 当你需要在一颗小 MCU 上同时轮询传感器、收发串口、按节拍喂看门狗时FreeRTOS操作系统嵌入式物联网RTOS上一篇CouchDB 一致性模型完全解析从 CAP 定理到 MVCC 与增量复制下一篇如何参与朱雀仿宋开源开发字表整理、字形反馈与社区协作完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考