Finding non transparent filled areas in images on javascript canvas

问题

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?

回答1:

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.

来源：https://stackoverflow.com/questions/30788718/finding-non-transparent-filled-areas-in-images-on-javascript-canvas