<!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>
我的个人公众号:归园田居 每日分享前端知识与资讯~