jQuery convert image to grayscale?

I'm new to jQuery and really likin开发者_高级运维g 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?

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";

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.

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

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.

There's a way you can do this with CSS3 only (so not a jQuery feature in general). It doesn't require any plugins though.

In CSS add:

.grayscale {
     filter: grayscale( 100% );
}

For Safari you'll have to use:

.grayscale {
     -webkit-filter: grayscale( 100% );
}

In JS use:

$('#myElement').addClass('grayscale');

Hope this helps!

You can also use this trick if your aim is to just make the image gray scale on hover. http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/

I have written a jQuery plugin called $.greyScale() which does this for you. It supports images hosted on another domain by proxying requests as well.

It is just invoked by using

$('img').grayScale();

I tried all the ones listed here and they didn't work well (either doing too much like attaching on hover or just not working across browsers or domains). So I whipped one up myself, which is very short and concise: https://github.com/arturnt/jquery.grayscale.js