【免费下载链接】perler-beads拼豆底稿生成器 (Perler Beads Generator)项目地址https://gitcode.com/gh_mirrors/pe/perler-beads点击查看免费下载perler-beads 是一款开源的拼豆底稿生成器Perler Beads Generator能把任意图片一键转换为带色号的拼豆图纸。很多拼豆软件的采购清单会把图片背景也算进去导致拼豆数量虚高、买豆多花冤枉钱。而 perler-beads 通过一套边界洪水填充Flood Fill算法实现背景智能移除让自动统计的拼豆数量真正所见即所得。这篇文章用最少代码、最多直觉带你彻底看懂它的原理。为什么拼豆底稿的数量会虚胖把一张图片转成拼豆图纸时程序会把画布切成 N×M 的网格每个格子映射成一颗豆子的颜色。问题在于图片四周往往是大片背景色比如白色如果统计时不做区分这些背景格子也会被计入总颗数和采购清单。结果就是图纸明明只要 800 颗豆统计却显示 1500 颗——多买的一盒豆子只能吃灰。 perler-beads 的思路很直白先自动把外部背景识别出来并打上标记统计和导出时直接忽略它们数量自然准确了。一键去背景体验是什么样的在生成图纸后界面上有一个「一键去背景」按钮src/app/page.tsx。点击后自动识别图片边缘的主色作为背景色从边缘开始向内淹没所有连通的背景格子这些格子在预览中变成浅灰色外部区域统计数量瞬间回落。整个操作还支持单步撤回程序在执行前保存了一份数据快照反悔只需点一下src/app/page.tsx#L1312-L1317。边界洪水填充算法是如何工作的洪水填充是图像处理里的经典算法——从某个起点出发像墨水渗入纸张一样把所有颜色相同且相互连通的区域全部标记一遍。perler-beads 的巧妙之处在于起点选在了图片的四条边上。第一步扫描边界锁定背景主色算法先遍历网格最外圈的所有格子第一行、最后一行、第一列、最后一列统计每个颜色出现的次数然后选出出现最多的那个颜色作为背景目标色边框颜色统计 → 取次数最多者 targetKey这一步对应 src/app/page.tsx#L1324-L1351 中的countBorderCell逻辑。为什么用边界统计而不是让用户手选颜色因为真正的背景一定接触图片边缘而画面主体的颜色很少铺满四边——这让背景识别几乎零误判、零操作成本。第二步用栈做非递归洪水填充确定背景色后程序把所有接触边缘且颜色等于 targetKey的格子压入一个栈stack然后循环执行弹出一个格子检查是否越界、是否已访问、颜色是否匹配匹配则把它标记为已访问并替换为透明格isExternal: true把它的上、下、左、右四个邻居压入栈中继续下一轮。核心循环见 src/app/page.tsx#L1381-L1388。为什么用栈迭代而不是递归因为大图可能有上万个连通格子递归深度会直接打爆调用栈栈式洪水填充无论区域多大都安全这也是 src/utils/floodFillUtils.ts 和 src/utils/pixelEditingUtils.ts 中所有填充实现统一采用的模式。第三步标记外部统计与导出时忽略被淹没的格子被写成统一的透明数据transparentColorData它带有一个关键标志位isExternal: true定义在 src/utils/pixelEditingUtils.ts#L7-L11。之后所有统计逻辑都遵循同一条规则if (cell !cell.isExternal) { 计入统计 }颜色统计更新在 src/app/page.tsx#L1392-L1409绘制预览时外部格则渲染为浅灰色src/components/PixelatedPreviewCanvas.tsx#L46下载图纸时外部格直接填白留空src/utils/imageDownloader.ts。为什么这样统计就准了这套设计有三个关键优势设计点解决的问题只移除与边界连通的背景画面内部与背景同色的孤岛比如云朵里的白云不会被误删以isExternal标志而非删除数据撤回、手动上色、颜色重映射都能精确区分真透明和背景统计、预览、导出三处共用同一过滤规则数量、图纸、采购清单三者永远一致一句话总结边界洪水填充用 O(N×M) 的一次扫描把哪些格子是背景变成了确定性的标记后续任何统计都不再需要猜。顺带一提同一套算法的其他用途洪水填充思想在 perler-beads 中是一鱼多吃一键擦除编辑模式下点选一片同色区域floodFillErase用同样的栈式填充一次性擦除整个连通块src/utils/pixelEditingUtils.ts#L22-L67专注模式区域引导getConnectedRegion把每种颜色的连通区域切分出来再按距离最近或面积最大排序指导你按顺序拼豆src/utils/floodFillUtils.ts#L4-L138。核心源码路径速查想深入阅读的同学可以直接跳转到这里一键去背景完整实现src/app/page.tsx#L1305-L1411洪水填充区域工具集src/utils/floodFillUtils.ts擦除/替换等像素编辑算法src/utils/pixelEditingUtils.ts像素化与颜色映射含透明像素跳过逻辑src/utils/pixelation.ts算法设计思路原文背景移除一节CLAUDE.md#L42-L43功能总览README.md实用小贴士PNG 透明背景的图片效果最好像素化时 alpha 128 的像素会被直接跳过src/utils/pixelation.ts#L162-L163不透明格天然不参与统计图片主体尽量贴满画布边缘边界识别的背景色会更纯粹若背景色与主体边缘色过于接近可调低颜色合并相似度阈值让色块边界更锐利再去背景会更干净误删了「一键去背景」支持单步撤回放心尝试。perler-beads 用一个教科书级的边界洪水填充就把背景污染统计这个老大难问题彻底解决了——对想了解图像处理算法的开发者来说这份浏览器端、纯 TypeScript 的实现也是一份非常易读的范例。赞分享【免费下载链接】perler-beads拼豆底稿生成器 (Perler Beads Generator)项目地址https://gitcode.com/gh_mirrors/pe/perler-beads点击查看免费下载相关推荐PrusaSlicer计算几何完全指南多边形偏移与智能填充算法揭秘PrusaSlicer计算几何完全指南多边形偏移与智能填充算法揭秘 PrusaSlicer作为3D打印领域的专业G code生成器其核心的计算几何算法决定了桌面应用3D渲染图形学PyTorch3D Implicitron 的 LSTMRenderer 深度解析基于 LSTM 的可学习 Raymarching 渲染器PyTorch3D Implicitron 的 LSTMRenderer 深度解析基于 LSTM 的可学习 Raymarching 渲染器 导读 LSTMRe人工智能深度学习计算机视觉图形学3 步完成 SiYuan 工作区迁移备份、导入、验证一次讲清3 步完成 SiYuan 工作区迁移备份、导入、验证一次讲清 换新设备时最怕的就是笔记还在不在、附件还能不能打开。SiYuan 工作区迁移其实就三步旧设备知识管理知识库后端前端AI 应用上一篇免费共享API Key安全吗free-llm-api-keys安全策略、隐私边界与负责任使用指南下一篇TypeScript 声明文件模板详解为可调用的函数模块编写 module-function.d.ts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考