在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. 使用“marching squares”算法查找圆形或矩形周围的边界路径点：Draw border around nontransparent part of image on canvas,

4. 迭代路径点并找到 [minX,minY] 和 [maxX,maxY]。这是圆形或矩形的边界框。

5. 擦除在步骤#4 中计算的边界框区域，以便您可以寻找下一个形状。

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