是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作,那对我来说就足够了。
我知道我可以用SVG和Canvas来做,但现在看起来工作量很大。
真的有懒人能做到的方法吗?
是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作,那对我来说就足够了。
我知道我可以用SVG和Canvas来做,但现在看起来工作量很大。
真的有懒人能做到的方法吗?
当前回答
如果您愿意使用Javascript,那么您可以使用画布将图像转换为灰度。因为Firefox和Safari支持<canvas>,所以它应该可以工作。
所以我在谷歌上搜索了“canvas grayscale”,第一个结果是http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html,似乎可以。
其他回答
如果您或其他将来面临类似问题的人愿意使用PHP。 (我知道你说HTML/CSS,但也许你已经在后端使用PHP) 下面是一个PHP解决方案:
我从PHP GD库中获得了它,并添加了一些变量来自动化这个过程…
<?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);
?>
如果您能够使用JavaScript,那么这个脚本可能就是您正在寻找的。它跨浏览器工作,目前为止对我来说工作得很好。您不能将它用于从不同域加载的图像。
http://james.padolsey.com/demos/grayscale/
一个糟糕但可行的解决方案是:使用Flash对象渲染图像,然后在Flash中为您提供所有可能的转换。
如果您的用户使用尖端浏览器,并且Firefox 3.5和Safari 4支持它(我不知道是否支持),您可以调整图像的CSS颜色配置文件属性,将其设置为灰度ICC配置文件URL。但那有很多假设!
如果您愿意使用Javascript,那么您可以使用画布将图像转换为灰度。因为Firefox和Safari支持<canvas>,所以它应该可以工作。
所以我在谷歌上搜索了“canvas grayscale”,第一个结果是http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html,似乎可以。
对于Firefox中的灰度百分比,请使用饱和滤镜(搜索'saturate')
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='saturate'><feColorMatrix in='SourceGraphic' type='saturate' values='0.2' /></filter></svg>#saturate"