Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery convert image to grayscale?

Tags:

jquery

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?

like image 375
Scott B Avatar asked Mar 19 '10 00:03

Scott B


4 Answers

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";
like image 153
Justin Jenkins Avatar answered Oct 13 '22 13:10

Justin Jenkins


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.

like image 42
Josef Richter Avatar answered Oct 13 '22 13:10

Josef Richter


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

like image 2
Gordon Gustafson Avatar answered Oct 13 '22 15:10

Gordon Gustafson


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.

like image 1
Dan Diplo Avatar answered Oct 13 '22 15:10

Dan Diplo