图片或页面置灰（兼容IE10,11）

凌晨 || AmsWait

已于 2022-10-24 10:16:17 修改

阅读量1.8k

点赞数

文章标签： html html5 css3 1024程序员节

于 2021-08-12 11:56:47 首次发布

本文链接：https://blog.csdn.net/amswait/article/details/119641062

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            width: 400px;
        }
        .gray {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
        }
    </style>
</head>

<body>
    <img src="./img/header_bg_share.jpg" alt="">
    <img src="./img/header_bg_share.jpg" alt="" class="gray">
    <img src="./img/header_bg_share.jpg" alt="" class="gray">
    <img src="./img/header_bg_share.jpg" alt="" class="gray">
    <script src="https://www.changyou.com/cdn/jquery/3.4.1/jquery.min.js"></script>
    <script>
        function gray() {
            var imgObj = document.querySelectorAll('.gray');
            if (!!window.ActiveXObject || "ActiveXObject" in window) {
                for (var i = 0; i < imgObj.length; i++) {
                    var canvas = document.createElement('canvas');
                    var canvasContext = canvas.getContext('2d');
                    var imgW = imgObj[i].width;
                    var imgH = imgObj[i].height;
                    canvas.width = imgW;
                    canvas.height = imgH;
                    canvasContext.drawImage(imgObj[i], 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 z = (y * 4) * imgPixels.width + x * 4;
                            var avg = (imgPixels.data[z] + imgPixels.data[z + 1] + imgPixels.data[z + 2]) / 3;
                            imgPixels.data[z] = avg;
                            imgPixels.data[z + 1] = avg;
                            imgPixels.data[z + 2] = avg;
                        }
                    }
                    canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
                    imgObj[i].src = canvas.toDataURL();
                }
            } else {
                return false;
            }
        }
        function IEHack() { // IE10与11需要处理兼容性
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
            var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
            var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
            var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
            if(isIE) {
                var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
                reIE.test(userAgent);
                var fIEVersion = parseFloat(RegExp["$1"]);
                if(fIEVersion == 10) {
                    gray()
                    return;
                }  
            } else if(isIE11) {
                gray()
                return;
            }
        }
        IEHack()
    </script>
</body>

</html>

我的个人公众号：归园田居每日分享前端知识与资讯～
请添加图片描述

凌晨 || AmsWait

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片或页面置灰（兼容IE10,11）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
复制链接

扫一扫