Reading Color information from an image

[kreitcher]

Say I have an image on an html page, I want to obtain the color of the particular pixel my mouse hovers over. This has to work over the entire image.
Can this be done? How do I do it?
Thanks in advance people.

[bobbyblades]

I'm going to take a guess and say that there is no way to do this in javascript you could obtain the location of the mouse over the image but there would be no way to grab the pixel from the image. you can do it in java apps by using a class called Robot and using a method called getPixelColor() I beleive, which grabs a portion of the screen and returns a Color object, but it cannot be done in javascript to my knowledge.

[kreitcher]

What if we approach this in two steps.

*Get the coords where the user has clicked : This can be done even without Javascript. example

<form name="test">
<input type="image" name="aaa" src="xyz.jpg">
</form>


aaa.x and aaa.y will contain the coords when the user clicks. Next.

*Is there a away to load an image into a buffer and read the coords? All this in the html page. I want to be able to load xyz.jpg and read its coords.

I know this is perfectly possible in Java and that I should be able to do it by placing it as a server side operation. However, I have bandwidth constraints.

[bobbyblades]

how would aaa contain the coordinates? it's just a image submit button?
yes you would know that it was clicked but you can't do anything with the click unless you handle the event via javascript, there is no bufferedImage in javascript an image is an image and you cannot read write data to it.

the only other way I can see besides java is to use javascript to get the click coordinates on the image, then use ajax to send the coordinates to some server side language where it can calculate the color of the pixel at the coordinate


you simply will not get this done using pure javascript