Display color image as monochrome

Question

Is there a way to display a color image as a grayscale using Html / Css? I.e. no server side processing.

Edited: monochrome → greyscale

Answer 1

The best way would be to download the grayscale image first. If this is for some guidance task, take a look at creating CSS sprite . I understand that this does not completely answer the question, but I cannot understand for me why you need to manipulate images on the client side.

Answer 2

Try the following:

http://snipplr.com/view/2836/grayscale-img-with-css-crossbrowser/

Could be a good alternative ...

Hope this helps!

Answer 3

In addition to the canvas, at least in some browsers (for example, in Firefox), you can use SVG filters. For example, see this slide (button 2 calls up a filter that does almost what you want).

Answer 4

I think I found another very good way with PHP!

Check this:

<?php $img = @imagecreatefromgif("php.gif"); if ($img) $img_height = imagesy($img); if ($img) $img_width = imagesx($img); // Create image instances $dest = imagecreatefromgif('php.gif'); $src = imagecreatefromgif('php.gif'); // Copy and merge - Gray = 20% imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20); // Output and free from memory header('Content-Type: image/gif'); imagegif($dest); imagedestroy($dest); imagedestroy($src); ?> 

I remembered your question when I play with PHP GD lib.

Good luck tell me if it will be alright ...

Trufa

Answer 5

This is not a shade of gray, but the opacity gives the user a sense of disconnection:

Stylesheet:

 .opaque { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50; } 

Html:

 <img class="opaque".... /> 

This solution is cross-browser, works with all latest browsers, IE8, older versions of Safari.