Getting Color Information From Images with JavaScript, PHP, and the GDLib
Sunday, April 23rd, 2006Colr.org has the ability to generate random colors from an image that you can load. I looked at the code and wondered why only one hundred randomly selected colors were loaded into the script, and I have now realized why.
There is a lot of data in image.
My own attempt at getting colors from images is a lot less random. You can hover over the image to get the color value for the pixel pointed at. It’s a nice feature, but it has draw backs. For one, it is really, really slow. Opera is the slowest and Firefox will throw ’script unresponsive’ warnings at the user (even though it’s just taking its time and will respond). Nevertheless I had fun making this. It works, and you can use it to get the RGB values from JPEG and PNG file types. It loads colors for GIF file types, but I’ve seen some inconsistency in it. There’s nothing to be done about it, I blame the GD Graphics Library, which only recently started to support gifs again.
So how do I do it? The image is loaded into PHP which uses the PHP image functions to get information for colors, including the color values for pixels. PHP records all the colors and their locations (for tens to hundreds of thousands of pixels), stores it in a string and sends it to JavaScript via AJAX. JavaScript then splits the string into several arrays, and associates rgb values with locations in a big multidimensional object. As the mouse hovers over the image, JavaScript uses onmousemove to get the X and Y position of the mouse pointer, calculates where it is above the image, and uses the location to retrieve the RGB values. JavaScript then converts the RGB values into a webcolor.
So there you go! Hopefully you’ll have some use for it. I know I will.