jQuery convert image to grayscale?

Question

I'm new to jQuery and really liking it. I'd like to know if there's an effect similar to IE's in which I can convert images to grayscale in the runtime?

Answer 1

Check out pixastic ... it is supposed to work in ...

• Internet Explorer 5.5+
• Opera 9.5+
• Firefox 2+
• WebKit Nightly

http://dph.am/pixastic-docs/docs/actions/desaturate/

var img = new Image();
img.onload = function() {
    Pixastic.process(img, "desaturate", {average : false});
}
document.body.appendChild(img);
img.src = "myimage.jpg";

Answer 2

Here's my simple jQuery plugin: jquery-grayscale

You run it like:

$('img').grayscale();

It makes use of <canvas> so it won't work in older browsers.

Answer 3

I don't think jQuery has a special way to do it, but you can use the <canvas> tag. see tutorial

Answer 4

There's an example of this being done in reverse (colour to greyscale) with jQuery at:

http://www.sohtanaka.com/web-design/examples/hover-over-trick/

I imagine it would be simple enough to reverse this so it went from grey to colour. The code itself looks very simple and elegant.