jQuery: Add Greyscale Images Client Side
Want to add a greyscale image to your webpage, but don’t want to add the extra bandwidth of an additional image? Do it client side with a HTML5 Canvas.
With all the new major browsers supporting HTML5 and the Canvas element, it is easy to offload this. I was inspired by this post by Darcy Clarke to adapt the example and compile it into a jQuery plugin. It has been tested to work in Chrome, Firefox, Safari, IE9, and Mobile Safari.
Usage is dead simple, simply call
greyscaleImage()on your selector of images.
Shablagoo!