在JavaScript画布上查找图像中的非透明填充区域 [英] Finding non transparent filled areas in images on javascript canvas

问题描述

我的图像上有一些实心圆，矩形等。我想找到实心区域的x1，x2，y1，y2区域。

，

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

擦除在第4步中计算出的边界框区域，以便您可以查找下一个形状。

p>

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

I've an image with some filled circles, rectangles etc. I want to find x1,x2, y1, y2 areas of filled areas.

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

Accepted answers works fine but i need to find each areas separately. As in the image below, i need thee x1, x2, y1, y2 positions. Do you have any ideas?

解决方案

Here's an outline to get you started:

1. Use context.getImageData to get the pixel data from the canvas,

2. Scan the pixel data for the first non-transparent pixel,

3. Use the "marching squares" algorithm to find the border path points around the circle or rectangle: Draw border around nontransparent part of image on canvas,

4. Iterate the path points and find the [minX,minY] & [maxX,maxY]. This the bounding box of the circle or rectangle.

5. Erase the bounding box area calculated in step#4 so that you can look for the next shape.

6. Go back to step#1 until you've determined the bounding boxes of all non-transparent shapes on the canvas.

这篇关于在JavaScript画布上查找图像中的非透明填充区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！