3

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.

Community
  • 1
  • 1
John Fazekas
  • 39
  • 1
  • 1
    What have you done so far? What did not work for you? Please share your code. – hakre Sep 22 '11 at 00:28
  • Are the images always in the same format? By that I mean, are the colors always the same, and is the inside circle terminating the gray area always at the same position, in relation to the outside circle, and also is the radius of the circle always at the same position in relation to the image's borders? Also, do these need to be generated on the fly every time, or can you cache the results somewhere? Not being much of a prodigy with image analysis, I can think of some processing intensive ways to do that, but that would only work if you could cache your results. Interesting problem, anyways. – user470714 Sep 22 '11 at 00:39
  • Do you have access to the underlying data? It would be easier and more reliable to define the coordinates if you know (for instance) that there will be a hot zone between 0.23MB and 0.26MB. That would get you around the image analysis problem entirely, and allow you to focus on just solving the much simpler problem of circular segments ("pizza slices") as hotzones. – adpalumbo Sep 22 '11 at 00:42
  • Which shaded region? There are 12 grey-shaded regions? – Mark Setchell Oct 15 '14 at 08:17

2 Answers2

2

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.

Sam Becker
  • 19,231
  • 14
  • 60
  • 80
1

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
Mark Setchell
  • 191,897
  • 31
  • 273
  • 432