CODEWITHSUNDEEP
javascriptimagecanvas
aymeba
aymeba

Reputation: 934

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?

enter image description here

Upvotes: 1

Views: 1899

Answers (1)

markE
markE

Reputation: 105015

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.

Upvotes: 1

Related Questions