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