JavaScript eyedropper (tell color of pixel under mouse cursor)

Question

I am looking for an "eyedropper" tool, that gives me the hex value of the pixel the mouse cursor is under, in JavaScript for a CMS.

For Firefox, there is the excellent ColorZilla extension that does exactly that. However, it's FF only of course, and I would really like to deliver the tool along with the CMS.

A dutch developer has had the very clever idea of using a combination of Ajax and PHP's imagecolorat() to find out the Pixel colour on an image. But that limits the range to images I can access server side, and I'm really dreaming of a universal tool.

I will work with one of these approaches, but would much prefer a cross-browser, Javascript or Flash based way that requires no server-side fiddling and no installing of extensions.

I am also interested in any IE specific solutions that do what ColorZilla can do - I could live with supporting IE and FF only, though a cross browser solution would of course be ideal.

Answer 1

It's not possible with JavaScript as it goes against cross-domain security. It would be very bad if you knew what pixels made up the image, http://some-other-host/yourPassword.png. You can only tell the color of the pixel under the mouse if either the mouse is over a canvas or an image element of the same domain (or an image element of another domain which is served with an Access-Control-Allow-Origin: * header). In the case of the canvas, you would do canvasElement.getContext('2d').getImageData(x, y, 1, 1).data. In the case of the images, you would have to draw them to a canvas with:

var canvas = document.createElement("canvas");
canvas.width = yourImageElement.width;
canvas.height = yourImageElement.height;
canvas.getContext('2d').drawImage(yourImageElement, 0, 0);

And then just use the previous method explained for canvases. If you must be able to convert to various representations of color values, try my color.js library.

Also, you're never going to be able to support IE <9 (that's assuming that IE9 supports canvas) and using Flash won't help as it can't read the pixel data of the document either.