CODEWITHSUNDEEP
phpimagecoordinatesregion
John Fazekas
John Fazekas

Reputation: 39

Need to find a way to extract coordinates of shaded region from an image file

I have an image file that has pizza shaped shaded regions in it:

here

I need a way to extract the coordinates of the shaded region so i can use them in html code to make the area clickable. This needs to be done dynamically as i have thousands of images. I am currently developing the site in PHP so anything in php or javascript would be helpful. If anyone has any idea how to do this please let me know.

Upvotes: 3

Views: 552

Answers (2)

Mark Setchell
Mark Setchell

Reputation: 208077

I would use ImageMagick to convert the disc from polar to cartesian coordinates and then, when you clarify which shaded regions you actually mean, I suspect the rest will be easy:

convert disc.png -distort DePolar 0 cartesian.jpg

enter image description here

As I have no feedback from you, I am kind of thinking on my feet. So, you could also convert everything that isn't shaded grey to white and everything that is grey to black, like this:

convert disc.png -fuzz 5% -fill black -opaque rgb\(211,211,211\) -fill white +opaque black out.png

enter image description here

And, you could do both in one go:

convert disc.png -distort depolar 0 -fuzz 5% -fill black -opaque rgb\(211,211,211\) -fill white +opaque black out.png

enter image description here

Then you can squidge the image down to a single row, like this:

convert disc.png -distort depolar 0 -fuzz 5% -fill black -opaque rgb\(211,211,211\) -fill white +opaque black -resize x1\! out.png

(I'll show that as 10 pixels high so you can see it)

enter image description here

Now, your coordinates are where the row changes from black to white and white to black. You can extract these into text and parse them out. Either like this:

convert disc.png -distort depolar 0 -fuzz 5% -fill black -opaque rgb\(211,211,211\) -fill white +opaque black -resize x1\! -colorspace gray -threshold 50% txt: | more 
# ImageMagick pixel enumeration: 1000,1,255,srgba
0,0: (255,255,255,1)  #FFFFFF  white
1,0: (255,255,255,1)  #FFFFFF  white
2,0: (255,255,255,1)  #FFFFFF  white
3,0: (255,255,255,1)  #FFFFFF  white
4,0: (255,255,255,1)  #FFFFFF  white
5,0: (255,255,255,1)  #FFFFFF  white
6,0: (255,255,255,1)  #FFFFFF  white
7,0: (255,255,255,1)  #FFFFFF  white

Or like this:

convert disc.png -distort depolar 0 -fuzz 5% -fill black -opaque rgb\(211,211,211\) -fill white +opaque black -resize x1\! -colorspace gray -threshold 50% -compress none pbm: | more 
P1
1000 1
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Upvotes: 1

Sam Becker
Sam Becker

Reputation: 19656

I can think of a number of steps you will need to take, but since you have no starting point I will describe what would be my approach on a high level.

  1. Find the center point, call it c. Not too hard width/2 height/2. It looks like these images were generated by a computer so I would presume they are all standard their dimensions and position of the circle.

  2. You will now need to find all the points on the circle with radius r (the distance from the center to the easily identifiable orange area that only exists in the shaded region) and center c.

  3. Test all those points on your image using PHPs imagick library and getImagePixelColor to test if the result is close to the easily identifiable orange. If it is, you have a match.

  4. For every match, the vector from the center of the circle to the match is part of a shaded area. Find only the outermost matches of a region and you have your coordiantes.

I'm sure this is only one approach and there are many ways to do it, but I would suggest you start implementing on you think will work then ask a more specific question when you get stuck.

Upvotes: 2

Related Questions