IE11 灰色 CSS滤镜 失效

html-css026

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不能实现抠图，据我所知滤镜是能实现的。

抠图的多涉及到像素点的问题，css不具备这些东西，不过canvas的话可以去掉颜色相同的像素点，从而实现某种意义上的抠图。