新项目有一个合做伙伴模块,须要将各个企业的logo先置灰,移入再恢复彩色。javascript
首先想到的是一套灰色一套彩色,二者互相切换src,可是以为都css3了还搞这种方法就有点过期了,并且多一套资源,消耗性能.
- 首先说一下,目前css实现方式是不兼容ie10+的浏览器的,因此对于ie10+的浏览器要使用js操做Canvas来实现;css
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
//上面代码是兼容火狐与谷歌的样式
//下面代码是兼容ie9如下浏览器的样式,包括ie9
filter: gray;
}
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);
//判断是否IE浏览器
if (!!window.ActiveXObject || "ActiveXObject" in window)
{ return true; }
else
{ return false; }
}