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