Display color picture as monochrome

Question

Is there a way to display a color picture as greyscale using Html/Css? Ie. no server side processing.

Edited: monochrome -> greyscale

Answer 1

The best way would be to upload a greyscale picture in the first place. If this is for some sort of hover task, take a look at creating a CSS sprite. I understand this doesn't answer the question fully, but I can't for the life of me understand why you need client side image manipulation.

Answer 2

Try this out:

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

Might be a good alternative...

Hope it helps!

Answer 3

In addition to canvas, in at least some browsers (such as Firefox), you can use SVG filters. For an example, see this slide (button 2 invokes a filter that does pretty much what you want).

Answer 4

I think i found another very good way with PHP!

Check this out:

<?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 ways playing around with the PHP GD lib.

Good luck!! tell me if its any good...

Trufa