在 IE11 中为 html/body 元素过滤灰度 [重复]答案

【问题标题】：filter grayscale in IE11 for html/body element [duplicate]在 IE11 中为 html/body 元素过滤灰度 [重复]
【发布时间】：2019-08-09 17:29:29
【问题描述】：

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

我有这个代码：

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

所以效果很好，整个页面都是黑白的。我如何为 IE11 实现这一点？有什么合理的hack吗？

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

【问题讨论】：

除了图像，您还想精确地转灰度吗？如果你只有文字或纯色，那么你可以手动设置所有元素的颜色，比如#elem{ color: green } .grayscale #elem { color: #CCC }等。
整个站点，例如，如果发生某些灾难事件。只是满足的要求。更喜欢一些全局解决方案而不是更改单个元素@Kaiido
无法完成。 IE11 在 svg 元素上不支持除 svg 过滤器之外的任何其他过滤器。您可以通过将图像替换为 svg 元素来破解图像上的某些内容，但对于其他任何内容您都不能。因此，您唯一的解决方案是手动进行，所以再一次，除了图像之外，您还想精确地转换灰度吗？
为什么要将整个页面变成“黑白”？你不能只发送一个字体颜色和背景颜色吗？默认是白色背景上的黑色文本，它本身就是灰度——这不是你想要的吗？
把它放在上下文中 - 这是一个航空公司网站，所以如果飞机坠毁，PM应该能够将页面变成黑白，所以基本上页面上的所有元素@ObsidianAge

标签： css internet-explorer-11 grayscale

【解决方案1】：

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

下面是sn-p的部分代码

// 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 中的输出：

【讨论】：