永发信息网

IE11 灰色 CSS滤镜 失效

答案:2  悬赏:80  手机版
解决时间 2021-11-25 16:54
  • 提问者网友:不要迷恋哥
  • 2021-11-25 04:00
IE11 灰色 CSS滤镜 失效
最佳答案
  • 五星知识达人网友:野味小生
  • 2021-11-25 05:34
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);还有一些跨浏览器的解决方案,代码太多,不贴出来了,百度一下就能够找到。

全部回答
  • 1楼网友:冷風如刀
  • 2021-11-25 07:07
你按正常写法来写吧,有具体代码没,ie11内核跟火狐是一个
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
点此我要举报以上问答信息
大家都在看
推荐资讯