在javascript画布上查找图像中的非透明填充区域

Question

我有一些带有圆圈，矩形等的图像。我想找到填充区域的x1，x2，y1，y2区域。

Javascript Method to detect area of a PNG that is not transparent

接受的答案工作正常，但我需要分别找到每个区域。如下图所示，我需要x1，x2，y1，y2位置。你有什么想法吗？

Answer 1

以下是帮助您入门的大纲：

1. 使用context.getImageData从画布中获取像素数据

2. 扫描第一个非透明像素的像素数据

3. 使用＆＃34;行进方块＆＃34;用于查找圆或矩形周围的边界路径点的算法：Draw border around nontransparent part of image on canvas，

4. 迭代路径点并找到[minX，minY]＆amp; [maxX的，MAXY]。这是圆形或矩形的边界框。

5. 删除步骤4中计算的边界框区域，以便查找下一个形状。

6. 返回步骤＃1，直到您确定了画布上所有非透明形状的边界框。