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

• 總結下該需求中需要注意的地方
  
• 使用Canvas使圖片置灰時穀歌與火狐會報錯，所以我們需要判斷下瀏覽器內核I
• L

//判斷是否IE瀏覽器
if (!!window.ActiveXObject || "ActiveXObject" in window)
 { return true; }
else
 { return false; }
} 

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