也谈页面变灰

这篇文章其实应该是几天前写的，只是一直拖着，现在补上。

现在一旦遇上了自然灾害，页面变灰已经变成一种常态了。如果没有变灰，可能还会引起对手的恶意攻击。

普通的页面变灰都是通过滤镜和css3 gray来实现，这种方式虽然处理简单，但有严重的性能问题，直接导致页面非常卡。

其实对于页面上需要变灰的地方有：图片，css里的涉及到颜色的值，flash等，flash一般用的很少，几乎可以忽略。

那对于图片和css里的color怎么去变灰呢？

color变灰

css里的color常用的有3种方式:

1、color keywords, 如：red, blue, yellow

2、#ff0000 十六进制，这种也是最常见的

3、rgb或者rgba,如： rgb(255, 0, 0)

对于color keywords，http://www.w3.org/TR/css3-color/#svg-color w3c上有完整的对照表。通过对照表转成十六进制，然后将十六进制转为rgb的方式，这样就可以拿到具体的R,G,B的颜色了。

对于如何将R，G，B的值转化为gray值，有个非常流行的心理学公式：

$gray = intval ( $color ['R'] 0.299 + $color ['G'] 0.587 + $color ['B'] * 0.114 );

图片变灰

颜色变灰需要自己去计算，但对于图片变灰就非常简单了，有非常多库可以直接使用，如：

1、ImageMagick里的convert命令

2、PHP GD库里的image_filter

都可以使用。

这2个方面都可以解决后，就可以写成通过的工具来解决页面变灰的问题。

奇舞团内部的燕尾服系统已经集成了该功能，只要编译时开启页面变灰的功能，一切就会自动处理。

这种方式相对于滤镜和css3 gray的好处在于：

1、没有严重的性能问题

2、图片变灰，图片色彩更少，图片更小了, 提高了页面性能。