老板：你也把咱们网站弄成灰色——网站变灰色如何实现

AIGC小陈

于 2023-02-08 16:33:01 发布

阅读量349

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_53312997/article/details/128938231

版权

从昨天下午开始，我们打开各种网站后都是灰色的，我们讲解一下如何用技术手段使网页变灰色。

//分析：我们网站的元素大多数都是img标签和其他文字行标签，文字我们直接使用color:#ccc就可以更改，图片不可能每张都更换成灰色背景，那非常不现实，一张一张改起来是多大的工程。所以一定是使用类似蒙层，滤镜的东西把原本的色彩遮罩。

利用css3属性 filter:

其实只需要一行代码就可以使网页变灰，我们利用css属性中的过滤器filter就可以实现

filter: grayscale(100%);

grayscale是将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

这是几年前我仿写的淘宝页，设置100%后效果对比一下

看到评论区有在问ie浏览器的兼容问题，这里回答一下

IE7~9可以使用IE自带的滤镜，在页面头部body内加入样式：

body{ filter:gray; }/*IE7-IE9，必须加在body元素上*/

IE10/11需要用grayscale.js来解决：这个插件是模拟IE的filter:progid方法，支持IE、Safari、Chrome、Opera、Firefox等浏览器。

<script type="text/javascript" src="grayscale.js"></script>
<script> grayscale(document.body); </script>

有很多人不知道在哪里下载这个js库，我把它放在下面，你可以直接复制到你的项目中去

var grayscale = (function(){var config = {colorProps: ['color','backgroundColor','borderBottomColor','borderTopColor','borderLeftColor','borderRightColor','backgroundImage'],externalImageHandler : {/* Grayscaling externally hosted images does not work - Use these functions to handle those images as you so desire *//* Out of convenience these functions are also used for browsers like Chrome that do not support CanvasContext.getImageData */init : function(el, src) {if (el.nodeName.toLowerCase() === 'img') {// Is IMG element...} else {// Is background-image element:// Default - remove background imagesdata(el).backgroundImageSRC = src;el.style.backgroundImage = '';}},reset : function(el) {if (el.nodeName.toLowerCase() === 'img') {// Is IMG element...} else {// Is background-image element:el.style.backgroundImage = 'url(' + (data(el).backgroundImageSRC || '') + ')';}}}},log = function(){try { window.console.log.apply(console, arguments); }catch(e) {};},isExternal = function(url) {// Checks whether URL is external: 'CanvasContext.getImageData'// only works if the image is on the current domain.return (new RegExp('https?://(?!' + window.location.hostname + ')')).test(url);},data = (function(){var cache = [0],expando = 'data' + (+new Date());return function(elem) {var cacheIndex = elem[expando],nextCacheIndex = cache.length;if(!cacheIndex) {cacheIndex = elem[expando] = nextCacheIndex;cache[cacheIndex] = {};}return cache[cacheIndex];};})(),desatIMG = function(img, prepare, realEl) {// realEl is only set when img is temp (for BG images)var canvas = document.createElement('canvas'),context = canvas.getContext('2d'),height = img.naturalHeight || img.offsetHeight || img.height,width = img.naturalWidth || img.offsetWidth || img.width,imgData;canvas.height = height;canvas.width = width;context.drawImage(img, 0, 0);try {imgData = context.getImageData(0, 0, width, height);} catch(e) {}if (prepare) {desatIMG.preparing = true;// Slowly recurse through pixels for prep,// :: only occurs on grayscale.prepare()var y = 0;(function(){if (!desatIMG.preparing) { return; }if (y === height) {// Finished!context.putImageData(imgData, 0, 0, 0, 0, width, height);realEl ? (data(realEl).BGdataURL = canvas.toDataURL()) : (data(img).dataURL = canvas.toDataURL())}for (var x = 0; x < width; x++) {var i = (y * width + x) * 4;// Apply Monoschrome level across all channels:imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] =RGBtoGRAYSCALE(imgData.data[i], imgData.data[i+1], imgData.data[i+2]);}y++;setTimeout(arguments.callee, 0);})();return;} else {// If desatIMG was called without 'prepare' flag// then cancel recursion and proceed with force! (below)desatIMG.preparing = false;}for (var y = 0; y < height; y++) {for (var x = 0; x < width; x++) {var i = (y * width + x) * 4;// Apply Monoschrome level across all channels:imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] =RGBtoGRAYSCALE(imgData.data[i], imgData.data[i+1], imgData.data[i+2]);}}context.putImageData(imgData, 0, 0, 0, 0, width, height);return canvas;},getStyle = function(el, prop) {var style = document.defaultView && document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(el, null)[prop]: el.currentStyle[prop];// If format is #FFFFFF: (convert to RGB)if (style && /^#[A-F0-9]/i.test(style)) {var hex = style.match(/[A-F0-9]{2}/ig);style = 'rgb(' + parseInt(hex[0], 16) + ',' + parseInt(hex[1], 16) + ',' + parseInt(hex[2], 16) + ')';}return style;},RGBtoGRAYSCALE = function(r,g,b) {// Returns single monochrome figure:return parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );},getAllNodes = function(context) {var all = Array.prototype.slice.call(context.getElementsByTagName('*'));all.unshift(context);return all;};var init = function(context) {// Handle if a DOM collection is passed instead of a single el:if (context && context[0] && context.length && context[0].nodeName) {// Is a DOM collection:var allContexts = Array.prototype.slice.call(context),cIndex = -1, cLen = allContexts.length;while (++cIndex<cLen) { init.call(this, allContexts[cIndex]); }return;}context = context || document.documentElement;if (!document.createElement('canvas').getContext) {context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';context.style.zoom = 1;return;}var all = getAllNodes(context),i = -1, len = all.length;while (++i<len) {var cur = all[i];if (cur.nodeName.toLowerCase() === 'img') {var src = cur.getAttribute('src');if(!src) { continue; }if (isExternal(src)) {config.externalImageHandler.init(cur, src);} else {data(cur).realSRC = src;try {// Within try statement just encase there's no support....cur.src = data(cur).dataURL || desatIMG(cur).toDataURL();} catch(e) { config.externalImageHandler.init(cur, src); }}} else {for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {var prop = config.colorProps[pIndex],style = getStyle(cur, prop);if (!style) {continue;}if (cur.style[prop]) {data(cur)[prop] = style;}// RGB color:if (style.substring(0,4) === 'rgb(') {var monoRGB = RGBtoGRAYSCALE.apply(null, style.match(/\d+/g));cur.style[prop] = style = 'rgb(' + monoRGB + ',' + monoRGB + ',' + monoRGB + ')';continue;}// Background Image:if (style.indexOf('url(') > -1) {var urlPatt = /\(['"]?(.+?)['"]?\)/,url = style.match(urlPatt)[1];if (isExternal(url)) {config.externalImageHandler.init(cur, url);data(cur).externalBG = true;continue;}// data(cur).BGdataURL refers to caches URL (from preparation)try {var imgSRC = data(cur).BGdataURL || (function(){var temp = document.createElement('img');temp.src = url;return desatIMG(temp).toDataURL();})();cur.style[prop] = style.replace(urlPatt, function(_, url){return '(' + imgSRC + ')';});} catch(e) { config.externalImageHandler.init(cur, url); }}}}}};init.reset = function(context) {// Handle if a DOM collection is passed instead of a single el:if (context && context[0] && context.length && context[0].nodeName) {// Is a DOM collection:var allContexts = Array.prototype.slice.call(context),cIndex = -1, cLen = allContexts.length;while (++cIndex<cLen) { init.reset.call(this, allContexts[cIndex]); }return;}context = context || document.documentElement;if (!document.createElement('canvas').getContext) {context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)';return;}var all = getAllNodes(context),i = -1, len = all.length;while (++i<len) {var cur = all[i];if (cur.nodeName.toLowerCase() === 'img') {var src = cur.getAttribute('src');if (isExternal(src)) {config.externalImageHandler.reset(cur, src);}cur.src = data(cur).realSRC || src;} else {for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {if (data(cur).externalBG) {config.externalImageHandler.reset(cur);}var prop = config.colorProps[pIndex];cur.style[prop] = data(cur)[prop] || '';}}}};init.prepare = function(context) {// Handle if a DOM collection is passed instead of a single el:if (context && context[0] && context.length && context[0].nodeName) {// Is a DOM collection:var allContexts = Array.prototype.slice.call(context),cIndex = -1, cLen = allContexts.length;while (++cIndex<cLen) { init.prepare.call(null, allContexts[cIndex]); }return;}// Slowly recurses through all elements// so as not to lock up on the user.context = context || document.documentElement;if (!document.createElement('canvas').getContext) { return; }var all = getAllNodes(context),i = -1, len = all.length;while (++i<len) {var cur = all[i];if (data(cur).skip) { return; }if (cur.nodeName.toLowerCase() === 'img') {if (cur.getAttribute('src') && !isExternal(cur.src)) {desatIMG(cur, true);}} else {var style = getStyle(cur, 'backgroundImage');if (style.indexOf('url(') > -1) {var urlPatt = /\(['"]?(.+?)['"]?\)/,url = style.match(urlPatt)[1];if (!isExternal(url)) {var temp = document.createElement('img');temp.src = url;desatIMG(temp, true, cur);}}}}};return init;

})();