2

Given a color image, is there a styling you could apply to the image tag to make it look black and white in the browser? I've seen IE only solutions which is surprising :) Usually it's the opposite.

Any ideas? Thanks

AnApprentice
  • 108,152
  • 195
  • 629
  • 1,012
  • IE did in fact make these kinds of filters available since v4 I think, but afaik there are no CSS or HTML ways to do it. – Kyle Feb 21 '11 at 20:17
  • Do you mean [greyscale](http://en.wikipedia.org/wiki/Grayscale) or [thresholding](http://en.wikipedia.org/wiki/Thresholding_(image_processing))? – thirtydot Feb 21 '11 at 20:19
  • http://stackoverflow.com/questions/562135/how-do-you-convert-a-color-image-to-black-white-using-javascript – Adam Feb 21 '11 at 20:20
  • possible duplicate of [Convert an image to grayscale in HTML/CSS](http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css) – robertc Feb 21 '11 at 23:55

2 Answers2

2

The reason you've only seen IE solutions is because it's not part of CSS. IE - as always - decided to go their own way and add a bunch of non standard filters :)

If you can use HTML 5, you can use the canvas tag and do something like this: http://spyrestudios.com/html5-canvas-image-effects-black-white/

Otherwise, you're probably out of luck.

Jeff
  • 13,943
  • 11
  • 55
  • 103
  • [You can do it (in Firefox) with SVG](http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css/4028908#4028908) – robertc Feb 22 '11 at 00:00
  • For the sake of completeness, thanks for the info! Unfortunately, in my book, a FF-only solution is just as bad as an IE-only solution. Anyone that intentionally targets the non-standard feature set of one browser is asking for trouble and is arguably holding the Internet back. – Jeff Feb 22 '11 at 14:39
1

For a pure jQuery solution, there is a plugin called Image Desaturate.

Otherwise, check out Desaturate Images Using Javascript and the Pixastic library for Desaturate.

I found these quickly via a simple Google search for "javascript desaturate" and "javascript desaturate jquery."

D.N.
  • 2,160
  • 18
  • 26
  • These plugins still use the `` tag. They just hide it away so the developer doesn't need to know how it is happening. Probably that is what you meant by "pure jQuery" but I wasn't sure if you were saying that jQuery is able to desaturate an image on its own. – Jeff Feb 22 '11 at 14:46
  • I meant pure jQuery as in sticking with one library, but with an added plugin. – D.N. Feb 23 '11 at 02:52