图像灰度(grayscale)实现 各浏览器实现方式

实现图像灰度（grayscale）有不同的方式。在前面一篇文章《纯 JAVASCRIPT 实现图片滤镜效果 DEMO 下载》已经给大家讲过滤镜效果的图片处理。从 ie4 的专属属性 filter 实现，到 css3 里 w3c 实现了标准的 filter，现在我们讨论探索一种浏览器兼容的方式。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

1、IE4 的 filter

img {  
    filter: gray; /* just for IE6-9 */  
}

但是 IE10 开始抛弃了私有滤镜，但还没有提供对标准 CSSfilter 的支持

2、CSS filter 方式

代码如下

img{
 -webkit-filter: grayscale(100%);    /* webkit 内核支持程度较好 */
 -moz-filter: grayscale(100%);    /* 其他内核现在并不支持，为了将来兼容性书写 */
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 filter: grayscale(100%);    /* 标准写法 */
}

grayscale 取值为 0%-100%，也可以用 0-1 取代，0%代表彩色图像，100%代表完全的灰度。
css filter 的浏览器兼容情况如下：

Chrome31+，Safari7+，Opera20+，ios Safari6+,Android Browser4.4+,Blackberry 10+均支持了-webkit-filter 的方式，IE 不支持，firefox 不支持。

3、SVG 方式

Firefox 虽然不支持 css filter，但是支持 svg effects for html，html 文件可以调用 svg 里面的效果，不仅仅是滤镜、还可以是 mask、clip 等等。

<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>

或者引用 gray.svg 文件

img{
      filter:url('gray.svg#grayscale'); 
      /*灰度滤镜放在 gray.svg 文件的 id 叫做 grayscale 的滤镜里*/
}

或者嵌入 html

img{
	filter:url('#grayscale'); /*svg 滤镜内嵌入了 html 文件*/
}

?4、js 原生实现方式

这种方式就是今天我们要详细讲述的一种方式，主要是兼容 IE10、IE11。

效果图如下：

jsGray 彩色

jsGray 灰色

具体 demo 代码：

<script type="text/javascript"> 
	
	$(window).load(function(){
		
		$(".item img").animate({opacity:1},500);
		
		// clone image
		$('.item img').each(function(){
			var el = $(this);
			el.css({"position":"absolute"}).wrap("
 <div class='img_wrapper' style='display: inline-block'>").clone().addClass(
 'img_grayscale').css({"position":"absolute","z-index":"998",
 "opacity":"0"}).insertBefore(el).queue(function(){
				var el = $(this);
				el.parent().css({"width":this.width,
 "height":this.height});
				el.dequeue();
			});
			this.src = grayscale(this.src);
		});
		
		// Fade image 
		$('.item img').mouseover(function(){
			$(this).parent().find('img:first').stop().animate({
 opacity:1}, 1000);
		})
		$('.img_grayscale').mouseout(function(){
			$(this).stop().animate({opacity:0}, 1000);
		});		
	});
	
	function grayscale(src){
        var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
        var imgObj = new Image();
		imgObj.src = src;
		canvas.width = imgObj.width;
		canvas.height = imgObj.height; 
		ctx.drawImage(imgObj, 0, 0); 
		var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
		for(var y = 0; y < imgPixels.height; y++){
			for(var x = 0; x < imgPixels.width; x++){
				var i = (y * 4) * imgPixels.width + x * 4;
				var avg = (imgPixels.data[i] + 
 imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
				imgPixels.data[i] = avg; 
				imgPixels.data[i + 1] = avg; 
				imgPixels.data[i + 2] = avg;
			}
		}
		ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, 
 imgPixels.height);//www.lisa33xiaoq.net
		return canvas.toDataURL();
    }
	    
</script> 

在线演示

具体灰度图片 demo 代码，见以下链接：

点击下载 ? 密码：afg2