這篇文章主要講解了filter實(shí)現(xiàn)網(wǎng)站整體變灰功能的方法，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。
創(chuàng)新互聯(lián)建站主要從事網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)固安,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792
前言
政府網(wǎng)站會(huì)遇到公祭日的時(shí)候，網(wǎng)站整體顏色變灰的情況。今天正好調(diào)了一下。在此把解決方案分享給大家。方案簡單實(shí)用，筆者已在生產(chǎn)環(huán)境使用過。通過整體的html使用filter來進(jìn)行過濾。如下，只要引入即可。
解決方案
重慶分公司
重慶分公司
html {
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}IE11 和 IE10的解決方案
經(jīng)過測試發(fā)現(xiàn)，以上代碼的方式對(duì)于谷歌，火狐，IE8，9都很好使。對(duì)于IE11和IE10效果不奏效。于是我們采取另一種方式，通過引用grayscale.js來使用。由于不能上傳文件，在此將grayscale.js的代碼寫下來。
/*
* -- grayscale.js --
* Copyright (C) James Padolsey (http://james.padolsey.com)
* Download by //www.jb51.net
*/
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 images
data(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 -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 -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;
})();
使用方式如下，中心思想就是當(dāng)我們是ie10和ie11瀏覽器的時(shí)候，調(diào)用graystyle的js函數(shù)。
這里建議直接捕捉body，如果想針對(duì)某一個(gè)，換其中的捕捉元素就可以。
總結(jié)
至此，網(wǎng)站變灰的方案就完美了。完美兼容各種瀏覽器，筆者已經(jīng)在生產(chǎn)環(huán)境使用過了，大家放心使用。
看完上述內(nèi)容，是不是對(duì)filter實(shí)現(xiàn)網(wǎng)站整體變灰功能的方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
