手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜Qcloud , 注册 | 登陆

在非IE浏览器中实现“灰阶化[1]”

首页 > Javascript >

原文:http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

在非IE浏览器中实现“灰阶化[1]”

这个问题看似简单,实际上要付出很大的努力[2]。要的结果很简单:在所有非IE浏览器中模拟Internet Explorer浏览器的grayscale(灰度)滤镜。然而,它的解决方法并非你想得那么简单,这也让我着实大大地吃了一惊。

在 IE中,grayscale滤镜可以应用到任意一个元素中,它会很直观地将元素转变为灰度。可以使用下面 这行复杂且专有的CSS来实现grayscale滤镜。

JavaScript代码
  1. elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';  

如上所示,在IE中实现这种效果简单是小菜一碟;然而,在其他的浏览器中,需要引起很大的关注。

需要有两件情况值得考虑:图片元素和非图片元素。“非图片”类元素实现十分简单:在当前文档中遍历每个元素,寻找类似“backgroundColor”和 “color”的色彩属性,将它的RGB颜色值转换为灰度值。有不少方法可以实现;注意我们这里不是说降低图片的饱和度;“灰阶化”很明显跟它不一样。

JavaScript代码
  1. // Desaturate:降低饱和度  
  2. function RGBtoDesat(r,g,b) {  
  3. var average = (r + g + b) / 3;  
  4. return {  
  5. r: average,  
  6. g: average,  
  7. b: average  
  8. };  
  9. }  
  10.    
  11. // Grayscale:灰阶化  
  12. function RGBtoGrayscale(r,g,b) {  
  13. var mono = parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );  
  14. return {  
  15. r: mono,  
  16. g: mono,  
  17. b: mono  
  18. };  
  19. }  

因此,每个带颜色属性的元素要使用它来转为灰阶;初始颜色用来重置属性值。

我们的图片能否转为灰阶取决于两个因素;一是浏览器必须要支持HTML5 canvas元素和它getImageData方法,二是主机上的所有图片必须位于同一域名下;除此外,主机上的图片不能脱离getImageData方法而不管它是否支持[3]。Google Chrome浏览器和Safari(4以下版本)由于不支持getImageData,先不作讨论。其他的浏览器支持canvas元素,完全可以做到“灰阶化”图片。

实现这种方式是要“手工”遍历图片中的每一像素,并应用我们用来设置CSS 颜色属性的RGBtoGrayscale函数。真要这样做的话,浏览器绝对吃不消;除非有极其快速的Javascript引擎来承受大图片处理的压力。

鉴于上面提到的原因,因此在任一个元素需要“灰阶化”前,添加一个“预置”函数去运行显得尤为必要,这个函数可以使用零超时递归技术[4]来避免耗死浏览器。如果仅仅是小图片需要转换的话,不必使用“预置”函数,可以直接使用这种暴力转换。

为什么呢,这是为什么呢?

你肯定想知道在“灰阶化”会有哪些应用。那么,比如说:降低色彩以减少用户的视觉焦点,以此来减少用户对你网站上五颜六色东西的关注;比如说,光箱特效。像 vBulletin的论坛系统就使用了这种效果,它会你点击离开时,将页面变灰;然后会弹出确认框,这个确认框非很容易识别,因为它是页面中惟一的带色彩的东西。

“灰阶化”困扰我的真实原因是因为我很想知道是否有可能做到这个目的。我已经知道在IE浏览器里有这个滤镜,我还想看看在其他浏览器中能否模拟实现这种方便的特效。我也知道这种特效可能被认为已经过时了,但这并不重要;我仅仅是对实现它很感兴趣。

示例

我做了一个示例页面,上面有几个格斗士[5]的图片,功能已经在这篇文章中说过了。注意,在Safari(小于4)或才 Chrome(还有可能在Firefox老版本(V.2以前))不起作用;不要忘了它仅仅是一个试验。
http://james.padolsey.com/demos/grayscale/

使用方法

要对一个元素实现“灰阶化”需要调用 grayscale()函数,并将元素作为参数传递,比如:
JavaScript代码
  1. var el = document.getElementById( 'myEl' );  
  2. grayscale( el );  
  3. // 也可以传递一个DOM集合  
  4. // (这样所有的元素都会得到“灰度效果”)  
  5. grayscale( document.getElementsByTagName('div') );  
  6.  //也可以在jQuery对象集合中使用  
  7. grayscale( $('div') );  
若要重置元素(返回到原来的颜色状态)必须调用grayscale.reset(),并将需要重置的元素作为参数传递:
JavaScript代码
  1. grayscale.reset( el );  
  2. // reset()同样可以接受DOM对象或jQuery对象集合参数  
  3. grayscale.reset( $('div') );  
其中的prepare函数,上面已经讲过了,在有大图片要处理的情况下需要使用到,或者即使只是几个小图片。注意大图片需要有一会儿的时间去处理(一张 300×300的PNG格式图片在“预置”方式下需要耗费3秒钟的时间)。
JavaScript代码
  1. grayscale.prepare( document.getElementById('myEl') );  
  2. // 同样可以接受DOM对象或jQuery对象集合参数  
  3. grayscale.prepare( $('.gall_img') ); 

[完]

注:

[1]:灰阶化:原文grayscaling,意为“采取灰度标准”,即灰阶化,将图片由彩色转为灰度;
[2]原文为”This started out as a little experiment and eventually turned into quite an endeavor.“,可能存在翻译问题;
[3]原文为“externally hosted images cannot be passed into ‘getImageData’ regardless of whether it’s supported.”,翻译存疑;
[4]零超时递归技术:原文zero-timeout recursion technique,应为zero-time recursive technique;参见http://en.wikipedia.org/wiki/Recursion_(computer_science)
[5]格斗士:原文blood-thirsty hunters,嗜血的猎人

--EOF--
灰阶化可以用在414或者512,值得用用喽。。。

 

 




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

« 上一篇 | 下一篇 »

发表评论

评论内容 (必填):