javascript - 在 JavaScript Canvas 上查找图像中的非透明填充区域

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从 Canvas 中获取像素数据，

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

3. 使用“行进方 block ”算法查找圆形或矩形周围的边界路径点:Draw border around nontransparent part of image on canvas ,

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

5. 删除第 4 步中计算出的边界框区域，以便您可以寻找下一个形状。

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