04月26, 2013

也谈页面变灰

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

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

普通的页面变灰都是通过滤镜和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、图片变灰,图片色彩更少,图片更小了, 提高了页面性能。

本文链接:http://welefen.com/post/page-gray.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。