Desaturate Images with Javascript/jQuery/CSS IN CHROME

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 jQu开发者_如何学Goery solutions, all to no avail.

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.com/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 completeness, 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.com/blog/2012/01/22/javascript-free-image-desaturat/