Javascript 计算图像中非连续块的数量

我正在运行一个关于在线数字刺绣的项目。对于成本计算部分，我需要知道图像中有多少个非连续块。当图像吹出时，图像中有12个块

原始图像：

我期望的结果

---

很抱歉，我无法提供此问题的任何联机编码示例。我完全不知道如何实现这个特性。无论是前端还是后端技术，如果您有任何建议，我们都将不胜感激。

这些问题很难解决。甚至人类也会犯错误

你提供的例子有13个区块，而不是我看到的12个区块。你错过了11点以上的两条腿之间的挡块

如果我错了，我会争辩为什么杯子的黑色（12）被计算在内，它也可能是猫的背部（10）

洪水泛滥。 洪水填充算法可以解决这个问题。有一个简单的泛洪填充算法，用JavaScript编写，并使用Canvas 2D API。使用图像时不得污染画布（相同来源或适当的CORS标题）

注意如果图像经过抗锯齿处理或编码为jpeg（或其他有损压缩），则还需要设置填充阈值

注意这仅适用于具有少量平淡颜色的图像。使用此方法无法计算包含渐变的图像，或计算为一个但具有多种颜色（由于阴影、照明、高光、反射等原因）的形状

数积木 使用alpha=0（透明）填充，而不是使用颜色填充

台阶

完成这些步骤后，图像中将显示单独项目的数量

整体填充算法还可以很容易地为您提供块的面积（计算填充的像素数），为您提供每个块的大小（宽度、高度）和位置（顶部、左侧、右侧底部）

---

唯一的问题是图像噪声（由于抗锯齿和压缩伪影）。这将沿颜色边缘提供许多小的断开连接的块。使用填充中的像素数可以忽略小于100左右像素的填充。在您提供的图像中，最小的块的面积约为400像素。

我将使用类似于

potrace

的方法将位图转换为向量，然后计算输出中闭合笔划的数量（可能会为反RGOUND添加1）。您可以使用连接组件处理来实现这一点。看见张贴输入的图像，但不要使用红色数字。@xenoid这很有趣。你能提供一些可以解释的例子吗？@fmw42我仍在努力理解相互连接的组件是如何工作的。如果还有其他示例，我们将不胜感激。@fmw42 imagemagick convert 1.png-定义连接的组件：区域阈值=410-连接的组件4-自动级别2.png。命令发出后，我得到了一个输出图像。我如何得到积木的数量？哇，解释得真不错。是的，你说得对！有13个街区，我错过了一个。你能给我举个可以原谅的例子吗？我对html5不是很熟悉。我已经建立了一个可以加载图像作为位图数据从url。你能帮我计算区块数量吗？我不知道如何使用html5。@peggy这是通过JavaScript（客户端）而不是HTML完成的，或者如果服务器端有许多语言选择，这取决于你使用的服务器。你需要有一些编程经验，因为我知道没有现成的解决方案。对不起，没有这些经验，我帮不了你什么忙。

Let block count represent number of blocks. Set to 0

Start at the top left most pixel.
Repeat following steps until you have reached bottom right most pixel

Start search
    If the pixel is not transparent 
        Apply the flood fill at that pixel
        Add 1 to block count
        Repeat from start search
    If the pixel is transparent
        move right one pixel, if past right edge move down one and start at left
        Repeat from start search