IE11 灰色 CSS滤镜 失效

html-css012

IE11 灰色 CSS滤镜 失效,第1张

IE10和IE11在图像滤镜方面还是比较坑爹的，不能执行filter滤镜，而且连svg滤镜也不支持，所以通常是用js来实现这个效果的。

具体可以参考下面这段代码：

var imgObj = document.getElementById('imgToGray')   

  

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

}  

imgObj.src = gray(imgObj)

还有一些跨浏览器的解决方案，代码太多，不贴出来了，百度一下就能够找到。

建议你不要经常使用滤镜。

一是CSS滤镜目前仅IE支持，并且有时在支持上会出现无法解释的BUG。

二是CSS滤镜如果用的太多了，会给访客的电脑造成负担。因为它的是客户端完成的，CSS滤镜效果太多太炫的话很会吃电脑内存，并且会让网页拖动起来不流畅。