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?

enter image description here

Community
  • 1
  • 1
aymeba
  • 934
  • 1
  • 11
  • 26

1 Answers1

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.

Community
  • 1
  • 1
markE
  • 102,905
  • 11
  • 164
  • 176
  • 4. Iterate the path points and find the [minX,minY] & [maxX,maxY]. This the bounding box of the circle or rectangle. How can i detect the rectangles with such points? It returns all non-transparent points as far as i understood. – aymeba Jun 11 '15 at 19:48
  • Step#3 will return a set of points that form a path around the first non-transparent shape. So finding the min's and max's of that set of points will give you the bounding box of that shape. ;-) – markE Jun 11 '15 at 20:05
  • How can i clear a rectangle on canvas? Is there any method to clear canvas like clear(x1, y1, x2, y2) ? – aymeba Jun 14 '15 at 12:32