css圖片置灰,變灰效果

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; }  
}

1. 當使用Canvas修改src時要記得保存原始的圖片地址與js返回的圖片地址，這樣的話才能利用src進行移出移出切換圖片色彩，由於置灰後的src是在原src上修改的。