IE 10 的 CSS 过滤灰度图像

CSS filter grayscale image for IE 10

提问by Wissam Abyad

Is there a way to make grayscale image filter work on IE 10 without JavaScript or SVG?

有没有办法让灰度图像过滤器在没有 JavaScript 或 SVG 的情况下在 IE 10 上工作？

I've been using the following code successfully in all browsers except IE 10.

我一直在除 IE 10 之外的所有浏览器中成功使用以下代码。

img{
filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter     id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /*     Firefox 10+, Firefox on Android */
filter:gray; /* IE6-9 */
-webkit-filter:grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);}

采纳答案by David Storey

This approach only works in WebKit and Firefox. It doesn't work in IE or Opera. WebKit is currently the only browser to support CSS filters, while Firefox supports SVG filters on HTML. Opera and IE support SVG filters, but only for SVG content.

此方法仅适用于 WebKit 和 Firefox。它不适用于 IE 或 Opera。WebKit 是目前唯一支持 CSS 过滤器的浏览器，而 Firefox 支持 HTML 上的 SVG 过滤器。Opera 和 IE 支持 SVG 过滤器，但仅适用于 SVG 内容。

There is no good way to make this work in IE10, as it dropped support for the legacy IE filters. There is a way, however, I'd not recommend it.

没有好的方法可以在 IE10 中完成这项工作，因为它放弃了对旧版 IE 过滤器的支持。有一种方法，但是，我不推荐它。

You can set IE10 to render using IE9 standards mode using the following meta element in the head:

您可以使用头部中的以下元元素将 IE10 设置为使用 IE9 标准模式进行渲染：

<meta http-equiv="X-UA-Compatible" content="IE=9">

This will turn support back on for legacy IE filters. However, it has the side effect of dropping IE into IE9 mode, where the latest advancements in IE10 will no longer be supported. In your case it may be possible that you do not need these new features currently, but if you go down this road, you'd need to be aware of it when updating the site in future.

这将重新启用对旧版 IE 过滤器的支持。但是，它具有将 IE 放入 IE9 模式的副作用，即不再支持 IE10 中的最新进展。在您的情况下，您目前可能不需要这些新功能，但如果您沿着这条路走下去，则在将来更新站点时需要注意这一点。

回答by Chandru

http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js/

http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js/

http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js-v2-0-with-browser-feature-detection-using-modernizr/

http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js-v2-0-with-browser-feature-detection-using-modernizr/

The above links give good idea for > IE10 and other browsers.

以上链接为 > IE10 和其他浏览器提供了好主意。

回答by Ata Iravani

This is a cross browser solution using HTML5 and jquery using fade effect

这是一个使用 HTML5 和 jquery 使用淡入淡出效果的跨浏览器解决方案

Code

代码

Demo

演示

Code:

代码：

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

    // On window load. This waits until images have loaded which is essential
    $(window).load(function(){

        // Fade in images so there isn't a color "pop" document load and then on window load
        $(".item img").fadeIn(500);

        // clone image
        $('.item 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":"998","opacity":"0"}).insertBefore(el).queue(function(){
                var el = $(this);
                el.parent().css({"width":this.width,"height":this.height});
                el.dequeue();
            });
            this.src = grayscale(this.src);
        });

        // Fade image 
        $('.item img').mouseover(function(){
            $(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
        })
        $('.img_grayscale').mouseout(function(){
            $(this).stop().animate({opacity:0}, 1000);
        });     
    });

    // Grayscale w canvas method
    function grayscale(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();
    }

</script>