今天又是全国哀悼日。汶川那次是全国人民自发的一种真实情感,但Gov把这一招用多了就不是那么一回事了,CCAV一整天在循环播放灾区感人报道,已经开始有人对这种强制行为不满了。“哀悼与否在于一个人的内心是否善良。表面上的让网页没有颜色,让视频网站不能搜索,究竟有多大意义呢?”

不过从技术上来讲,要实现网页灰度,最稳妥的办法莫过于直接处理所有图像,不用考虑兼容,不用考虑效率。但是,工作量比较大,切换回来也费力。

IE系列支持css滤镜,我在珞珈山水BBS首页上试了一下,一句 filter:gray; 就解决了所有问题。但是,众所周知,IE以效率低著名,你会发现开启以后速度显著下降。并且,最致命的,在Chrome等其他浏览器下无效。

有没有兼容所有浏览器的办法呢?有。JavaScript能做到,早就有人用js模拟了IE的gray滤镜,这里有一个demo,也可以去看看《“GRAYSCALING” IN NON-IE BROWSERS》。估计玉树那次whuyeren学长就是这么做的。这里js对不同的浏览器有区别地处理,IE(和gray滤镜下一样)将显示的灰度图片下载下来会发现仍然是彩色的,而Chrome下把图片下载下来本身就是灰度的,所以承受了比较大工作量的实时计算转化,This can really eat up the browser; even speedy JavaScript engines can suffer considerably with large images.

这个js主要做了两个方面的工作。就像作者网页里讲的,有两件事情需要处理:图片和所有其他东西。“所有其他东西”的处理比较容易,直接循环所有的elements替换掉color属性,全部转换为灰度显示。图片的问题是需要浏览器对 CanvasContext.getImageData 的支持,Chrome和低版本的Safari可能会有问题,于是就很“暴力地”一个像素一个像素地转化,这就是上面讲到Chrome下把图片下载下来本身就是灰度的原因。

还有一个问题就是对外链的图片无效,图片必须托管在同一个域名下。下面是使用方法:

1. 下载grayscale.js文件

2. 在你的header里引用这个js文件

<script type="text/javascript" src="../include/jscript/grayscale.js"></script>

3. 要实现全站灰度,在onload事件中调用

grayscale(document.body);

Update

又是地震,这回又是是四川。几年过去,HTML5 时代也到来了,下面的代码几乎可以通杀所有浏览器,方便很多

<style>
html{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
</style>