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

实现图像灰度(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。

效果图如下:

jsGray彩色

jsGray彩色

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

 

 

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到