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

更多精彩内容请看web前端中文站
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。

效果图如下：

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