在 IE11 中为 html/body 元素过滤灰度

Question

我想使用灰度将我的整个页面设为黑白。它适用于所有浏览器，除了 IE 11 也是必需的。有很多类似的问题，但通常针对特定元素 like an image.

我有这个代码：

body {
  width: 100%;
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

所以效果很好，整个页面都是黑白的。我如何为 IE11 完成此操作？有什么合理的破解方法吗？

问题与建议的答案不同 -> 我正在寻找解决方案，如何以某种合理的方式解决 IE 中的问题。

Answer 1

由于IE不支持灰度滤镜，您可以尝试使用SVG+JS的方式在IE中应用灰度滤镜

下面是部分代码片段。

// Grayscale images only on browsers IE10+ since they removed support for CSS grayscale filter
if (getInternetExplorerVersion() >= 10){
    $('img').each(function(){
        var el = $(this);
        el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"5","opacity":"0"}).insertBefore(el).queue(function(){
        var el = $(this);
        el.parent().css({"width":this.width,"height":this.height});
        el.dequeue();
    });
this.src = grayscaleIE10(this.src);
});

// Quick animation on IE10+
    $('img').hover(function () {
        $(this).parent().find('img:first').stop().animate({opacity:1}, 200);
    },
    function () {
        $('.img_grayscale').stop().animate({opacity:0}, 200);
    }
);

function grayscaleIE10(src){
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var imgObj = new Image();
    imgObj.src = src;
    canvas.width = imgObj.width;
    canvas.height = imgObj.height;
    ctx.drawImage(imgObj, 0, 0);
    var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    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;
         }
     }
    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    return canvas.toDataURL();
    };
};

完整示例代码参考：

Cross-Browser Grayscale image example using CSS3 + JS

在 IE 11 中的输出：

在 IE11 中为 html/body 元素过滤灰度

filter grayscale in IE11 for html/body element

css

grayscale

internet-explorer-11