复盘贴，众网站IE10/11网页变灰方法对比代码

缘起

在上礼拜五，众网站收到了网站变灰的通知，当然编者也在周五在进行网站变灰，Chrome，FF等问题不大，一段CSS完成，速度也很快，但是IE10/11很难啃，需要借助JavaScript来完成。由于生产工具原因，最后对IE10/11做了屏蔽处理，第二天，作者特意研究了众多网站对IE10/11的变灰处理，特进行此次复盘。

1.js工具 grayscale.js

先上图

该方法便是采用grayscale.js插件（点我下载），通过js对图片进行变灰处理，使的网站整体变灰，附变灰使用的公式

ITU-R BT.709的亮度公式为 Y＝0.2126R+0.7152G+0.0722B

该方法缺点：由于对每个图片进行变灰处理，图片量较大的网站不适应，会很吃电脑配置，表示在公司卡死5分钟后能出，家里游戏本卡死1分钟左右。

2.js代码

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();  
}
$(function(){
console.log($('img').attr('src'))
 $('img').attr('src',gray($('img')[0]))
});

demo下载
效率相对而言比上一个高，缺点：目前对css背景图片不支持，后期待优化升级。

3.灰色遮罩层

这是我真真的没想到的方法。即完成了需求，还不影响访问速度
CSS代码如下

<style>
    #skin-close{
      display: none;
    }
    /* .qq-body-skin{
      background-color: #d20001!important;
    } */
    .qq-body-skin .layout{
      margin-bottom:0;
      padding-bottom: 20px;
    }
    .qq-body-skin .qq-skin,
    .qq-body-skin .qq-top{
      padding-bottom: 0;
    }
    .garyBody{
      filter: grayscale(100%);
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      -webkit-filter: grayscale(1);
    }
    .iebrowser{
        background-color: #ddd ;
        opacity: 0.5;
        filter: Alpha(opacity=50);
    }
    .iebrowser .qq-nav .nav-mod{
        background-color: #b0b0b1 !important;
    }

    .iebrowser .searchBtn{
      background-color: #b0b0b1 !important;
    }

    .iebrowser .mod .hd .tit.active a{
      display: inline-block !important;
      color: #161617 !important;
      border-bottom: 4px solid #212121 !important;
    }
    .iebrowser .mod .bd .cate {
      color: #212222 !important;
    }
    .iebrowser  a:hover {
      color: #030303 !important;
    }
    .iebrowser .m-product .list .prod-2, .qq-main .m-product .list .prod-4{
      background: none !important;
    }
    
  </style>

后记

目前找到的方法就是上述三种，欢迎补充！