css图片置灰,变灰效果

最新推荐文章于 2024-01-24 09:39:01 发布

原创最新推荐文章于 2024-01-24 09:39:01 发布 · 1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css变灰 #ie10图片变灰 #前端 #javascript #Canvas

css 专栏收录该内容

21 篇文章

订阅专栏

在新项目中，需要实现图片移入置灰、移出恢复彩色的效果。通过CSS3可以实现兼容IE9以下及现代浏览器的图片变灰，但不适用于IE10+。对于IE10+，使用JavaScript操作Canvas来达到变灰效果。需要注意的是，使用Canvas可能在某些浏览器中报错，需判断浏览器内核，并保存原始图片地址以便于切换色彩。

css图片置灰,变灰效果

新项目有一个合作伙伴模块，需要将各个企业的logo先置灰，移入再恢复彩色。

首先想到的是一套灰色一套彩色，两者互相切换src,但是觉得都css3了还搞这种方法就有点过时了，而且多一套资源，消耗性能.
- 首先说一下，目前css实现方式是不兼容ie10+的浏览器的，所以对于ie10+的浏览器要使用js操作Canvas来实现；

下面是css3的代码实现,兼容Ie9以下，谷歌，火狐，浏览器，不兼容ie10+

.gray { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);

  filter: grayscale(100%);
//上面代码是兼容火狐与谷歌的样式
//下面代码是兼容ie9以下浏览器的样式，包括ie9
  filter: gray;
}

下面是使用js来兼容ie10+的浏览器

function gray(imgObj) {  
  var canvas = document.createElement('canvas');  
  var canvasContext = canvas.getContext('2d');  

  var imgW = imgObj.width;  
  var imgH = imgObj.height;  
  canvas.width = imgW;  
  canvas.height = imgH;  

  canvasContext.drawImage(imgObj, 0, 0);  
  var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);  

  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;  
      }  
  }  
  canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);  
  return canvas.toDataURL();  
}
//调用方法
//调用gray方法会返回一个置灰后图片的src,修改当前彩色图片的src为置灰后的src即可
imgObj.src = gray(imgObj);

总结下该需求中需要注意的地方
1. 使用Canvas使图片置灰时谷歌与火狐会报错，所以我们需要判断下浏览器内核

//判断是否IE浏览器
if (!!window.ActiveXObject || "ActiveXObject" in window)  
        { return true; }  
else  
        { return false; }  
}

当使用Canvas修改src时要记得保存原始的图片地址与js返回的图片地址，这样的话才能利用src进行移出移出切换图片色彩，因为置灰后的src是在原src上修改的。