2

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

Edited: monochrome -> greyscale

John Strickler
  • 25,151
  • 4
  • 52
  • 68
  • You could do it with a `` probably; just run through the pixels normalizing intensity to monochrome. Not all browsers support `` however. – Pointy Oct 14 '10 at 20:22
  • I assume you mean gray-scale, not monochrome -- the latter would be just blacks and whites. – tcrosley Oct 14 '10 at 20:24
  • @Pointy, canvas would work for my purposes actually. And yes, crosley, I meant greyscale thanks for the correction. Thanks ;p – John Strickler Oct 14 '10 at 20:25
  • @tcrosley yes right, of course. Sorry. @John the "image data" format for `` is really simple - you get an array of values, such that each group of four (counting up from the start of the array) is a pixel. The first three values are RGB (0..255) and the fourth is alpha. Thus you'd get the image data, process it, and put it back. – Pointy Oct 14 '10 at 20:27
  • 1
    Duplicate of http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css , `` is new i guess but besides that everything was said in that thread – Dennis G Oct 14 '10 at 20:29
  • Maybe you solved it by know but I found what I think is an interesting solution! – Trufa Oct 16 '10 at 01:12

5 Answers5

2

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.

m.edmondson
  • 30,382
  • 27
  • 123
  • 206
1

This is not greyscale, but opacity gives to the user the sense of disabled:

Stilesheet:

.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 recent browser, IE8, old versions of Safari.

Emanuele Greco
  • 12,551
  • 7
  • 51
  • 70
1

Try this out:

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

Might be a good alternative...

Hope it helps!

Trufa
  • 39,971
  • 43
  • 126
  • 190
1

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).

David Baron
  • 920
  • 4
  • 5
1

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

Trufa
  • 39,971
  • 43
  • 126
  • 190