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

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

Answer 2

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

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

http://www.pixastic.com/lib/docs/actions/desaturate/

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

You can also go the route of ...

http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/

Answer 3

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.