web-dev-qa-db-fra.com

Filtre CSS image en niveaux de gris pour IE dix

Existe-t-il un moyen de faire fonctionner le filtre d’image en niveaux de gris sur IE 10 sans JavaScript ou SVG?

J'ai utilisé le code suivant avec succès dans tous les navigateurs, à l'exception de 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%);}
css3filterinternet-explorer-10grayscale
22
Wissam Abyad

Cette approche ne fonctionne que dans WebKit et Firefox. Cela ne fonctionne pas dans IE ou Opera. WebKit est actuellement le seul navigateur à prendre en charge les filtres CSS, tandis que Firefox prend en charge les filtres SVG sur HTML. Opera et IE prennent en charge les filtres SVG, mais uniquement pour le contenu SVG.

Il n’existe aucun moyen efficace de faire fonctionner cela dans IE10, car il a cessé de prendre en charge les filtres IE existants. Il existe un moyen, cependant, je ne le recommanderais pas.

Vous pouvez configurer IE10 pour le rendu à l'aide du mode standard IE9 en utilisant le méta-élément suivant dans l'en-tête:

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

Cela réactivera le support pour les filtres IE existants. Cependant, cela a pour effet secondaire de faire passer IE en mode IE9, où les dernières avancées dans IE10 ne seront plus prises en charge. Dans votre cas, il est possible que vous n’ayez pas besoin de ces nouvelles fonctionnalités pour le moment, mais si vous vous engagez dans cette voie, vous devrez en prendre connaissance lors de la mise à jour future du site. 

24
David Storey

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/

Les liens ci-dessus donnent une bonne idée pour> IE10 et les autres navigateurs.

3
Chandru

Ceci est une solution multi-navigateur utilisant HTML5 et jquery utilisant un effet de fondu

Code

Démo

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>
0
Ata Iravani