I can't seem to find a way to render grayscale images from colored images in Chrome with CSS or Javascript. I have a feeling that any Canvas solution won't work in Chrome and was looking for another.

Any help is appreciated, I've tried Pixastic and a bunch of other jQuery solutions, all to no avail.

I can't seem to find a way to render grayscale images from colored images in Chrome with CSS or Javascript. I have a feeling that any Canvas solution won't work in Chrome and was looking for another.

Any help is appreciated, I've tried Pixastic and a bunch of other jQuery solutions, all to no avail.

• javascript
• jquery
• css
• google-chrome
• grayscale

• 3 "I have a feeling that any Canvas solution won't work in Chrome and was looking for another" - why? "I've tried Pixastic and a bunch of other jQuery solutions" - what goes wrong? Pixastic works fine in Chrome.. – thirtydot Commented Jul 20, 2011 at 21:50
• I have tried a lot of alternatives to this and found none that is sustainable. The final resort - the usual one... gray-scale attached to color and background switching via CSS. – foxybagga Commented Jul 20, 2011 at 22:52
• @thirtydot if you look at the bottom of that page you sent ( link ) you'll notice that Chrome is not one of the supported browsers – Joseph Szymborski Commented Jul 21, 2011 at 1:51
• 1 @Joseph Szymborski: Yeah, but "WebKit nightly" is, and that page was written a while ago. What was then a "WebKit nightly" is now an old version of Chrome/Safari (which are WebKit-based browsers). Pixastic uses a canvas in exactly the same way that your accepted answer does.. – thirtydot Commented Jul 21, 2011 at 8:27
• @thirtydot Yup, I missed that. Thanks! – Joseph Szymborski Commented Jul 21, 2011 at 22:26

3 Answers 3

This may help:

    filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);

I wanted to do a similar thing a week or two ago and found this example:

http://webdesignerwall./tutorials/html5-grayscale-image-hover

It works by rendering the image to canvas, grayscaling it and then getting the Base64 representation. It's not for IE, but since you specified Chrome, you should be good to go.

Just for the sake of pleteness, grayscaling an image in IE can be done with the

filter: gray;

css option

I don't know if Javascript is a requirement for you, or if you plan to use this on dynamic images, but I put together a tutorial that explains how to do this using only CSS/HTML. It makes use of the opacity and transition style declarations. With this, two images can create a "transition illusion" between themselves using the :hover pseudo-selector.

Check it out and let me know if it helps at all. http://www.stephenwalcher./blog/2012/01/22/javascript-free-image-desaturat/