In my last post, I got somewhat excited about the idea of making a Greasemonkey script that would allow you to adjust the brightness of images on websites. One afternoon a few days ago, having nothing better to do, I wrote the script — and it sort of works. More precisely, it works only on some websites.
The script, like the imgFx plugin, makes use of the canvas HTML element. Among other things, canvas lets us retrieve the image’s pixel data as RGB values. To make an image brighter, we need to read all the pixels, increase their RGB values, and use the new pixel data to redraw the image. Sounds rather simple, but there is one fundamental problem. Due to security restrictions, Firefox will let us read the pixel data only if the image originates at the exact same domain as the website itself. Even if it’s just the sub-domain that is different, it won’t be allowed. So, if you have a website at somedomain.com, but your images come from images.somedomain.com, the script won’t work with it.
Anyway, in case you’d like to try out the script, here it is: brightenup.user.js
I’ve checked the most popular image hosting websites, and it seems only ImageShack meets the requirement of images originating at the exact same domain as the page on which they appear. Thus, the script is set to execute on *.imageshack.us. Here’s a sample image that you can test it on (no goatse, and safe for work, I promise):
http://img479.imageshack.us/my.php?image=letescaupeje0.jpg
Move the mouse cursor over the image, and two buttons will pop up in the top left corner. Press “+” and “-” to make the image more or less bright.
Update (Nov 8):
I’ve uploaded the script to Userscripts.org for the world to see — there it is.