jQuery convert image to grayscale?

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

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.


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

Tags:

Jquery