企业官网建设流程全解析

perler-beads 是一款开源的拼豆底稿生成器（Perler Beads Generator），能把任意图片一键转换为带色号的拼豆图纸。很多拼豆软件的"采购清单"会把图片背景也算进去，导致拼豆数量虚高、买豆多花冤枉钱。而 perler-beads 通过一套边界洪水填充（Flood Fill）算法实现背景智能移除，让自动统计的拼豆数量真正"所见即所得"。这篇文章用最少代码、最多直觉，带你彻底看懂它的原理。

为什么拼豆底稿的数量会"虚胖"？

把一张图片转成拼豆图纸时，程序会把画布切成 N×M 的网格，每个格子映射成一颗豆子的颜色。问题在于：图片四周往往是大片背景色（比如白色），如果统计时不做区分，这些背景格子也会被计入总颗数和采购清单。

结果就是：图纸明明只要 800 颗豆，统计却显示 1500 颗——多买的一盒豆子只能吃灰。

💡 perler-beads 的思路很直白：先自动把"外部背景"识别出来并打上标记，统计和导出时直接忽略它们，数量自然准确了。

一键去背景：体验是什么样的

在生成图纸后，界面上有一个「一键去背景」按钮（src/app/page.tsx）。点击后：

1. 自动识别图片边缘的主色，作为背景色；
2. 从边缘开始向内"淹没"所有连通的背景格子；
3. 这些格子在预览中变成浅灰色（外部区域），统计数量瞬间回落。

整个操作还支持单步撤回：程序在执行前保存了一份数据快照，反悔只需点一下（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）。

为什么这样统计就"准"了？

这套设计有三个关键优势：

一句话总结：边界洪水填充用 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 的实现也是一份非常易读的范例。