Skip to content

Instantly share code, notes, and snippets.

@davinma

davinma/greyscale.md

Last active April 7, 2020 09:35
Show Gist options
  • Save davinma/630dd2f73ed66d61772691fd02b79f7c to your computer and use it in GitHub Desktop.
Save davinma/630dd2f73ed66d61772691fd02b79f7c to your computer and use it in GitHub Desktop.
Download ZIP
网页变灰
Raw
greyscale.md

CSS 部分:

body {
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  -o-filter:grayscale(1);
  filter:gray!important;
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  filter:grayscale(100%);
}

filter 属性加在 html 元素上时，部分浏览器无效。在部分浏览器中，CSS 中 hover 产生的 show/hide 效果亦无效，故推荐加在 body 元素上。

DO NOT USE LIKE THIS

html, html * {
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  -o-filter:grayscale(1);
  filter:gray!important;
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  filter:grayscale(100%);
}

IE 10 或 IE 11 使用以上代码无效，需要使用 grayscale.js 配合 IE 浏览器版本检测，当检测到 IE 浏览器为 IE 10 或 IE 11 时，执行以下两行代码：

grayscale(document.body);
grayscale(document.getElementsByTagName("img"));

附上完整的 grayscale.js 压缩版，代码末尾已加上 IE 版本检测：

var grayscale=function(){var e,t,a={colorProps:["color","backgroundColor","borderBottomColor","borderTopColor","borderLeftColor","borderRightColor","backgroundImage"],externalImageHandler:{init:function(e,t){"img"===e.nodeName.toLowerCase()||(n(e).backgroundImageSRC=t,e.style.backgroundImage="")},reset:function(e){"img"===e.nodeName.toLowerCase()||(e.style.backgroundImage="url("+(n(e).backgroundImageSRC||"")+")")}}},r=function(e){return new RegExp("https?://(?!"+window.location.hostname+")").test(e)},n=(e=[0],t="data"+ +new Date,function(a){var r=a[t],n=e.length;return r||(r=a[t]=n,e[r]={}),e[r]}),o=function(e,t,a){var r,l=document.createElement("canvas"),c=l.getContext("2d"),g=e.naturalHeight||e.offsetHeight||e.height,d=e.naturalWidth||e.offsetWidth||e.width;l.height=g,l.width=d,c.drawImage(e,0,0);try{r=c.getImageData(0,0,d,g)}catch(e){}if(!t){o.preparing=!1;for(u=0;u<g;u++)for(var s=0;s<d;s++){var m=4*(u*d+s);r.data[m]=r.data[m+1]=r.data[m+2]=i(r.data[m],r.data[m+1],r.data[m+2])}return c.putImageData(r,0,0,0,0,d,g),l}o.preparing=!0;var u=0;!function(){if(o.preparing){u===g&&(c.putImageData(r,0,0,0,0,d,g),a?n(a).BGdataURL=l.toDataURL():n(e).dataURL=l.toDataURL());for(var t=0;t<d;t++){var s=4*(u*d+t);r.data[s]=r.data[s+1]=r.data[s+2]=i(r.data[s],r.data[s+1],r.data[s+2])}u++,setTimeout(arguments.callee,0)}}()},l=function(e,t){var a=document.defaultView&&document.defaultView.getComputedStyle?document.defaultView.getComputedStyle(e,null)[t]:e.currentStyle[t];if(a&&/^#[A-F0-9]/i.test(a)){var r=a.match(/[A-F0-9]{2}/gi);a="rgb("+parseInt(r[0],16)+","+parseInt(r[1],16)+","+parseInt(r[2],16)+")"}return a},i=function(e,t,a){return parseInt(.2125*e+.7154*t+.0721*a,10)},c=function(e){var t=Array.prototype.slice.call(e.getElementsByTagName("*"));return t.unshift(e),t},g=function(e){if(e&&e[0]&&e.length&&e[0].nodeName)for(var t=Array.prototype.slice.call(e),d=-1,s=t.length;++d<s;)g.call(this,t[d]);else{if(e=e||document.documentElement,!document.createElement("canvas").getContext)return e.style.filter="progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)",void(e.style.zoom=1);for(var m,u=c(e),f=-1,p=u.length;++f<p;){var v=u[f];if("img"===v.nodeName.toLowerCase()){var h=v.getAttribute("src");if(!h)continue;if(r(h))a.externalImageHandler.init(v,h);else{n(v).realSRC=h;try{v.src=n(v).dataURL||o(v).toDataURL()}catch(e){a.externalImageHandler.init(v,h)}}}else for(var y=0,I=a.colorProps.length;y<I;y++){var C=a.colorProps[y],b=l(v,C);if(b)if(v.style[C]&&(n(v)[C]=b),"rgb("!==b.substring(0,4)){if(b.indexOf("url(")>-1){var x=/\(['"]?(.+?)['"]?\)/,w=b.match(x)[1];if(r(w)){a.externalImageHandler.init(v,w),n(v).externalBG=!0;continue}try{var L=n(v).BGdataURL||(m=void 0,(m=document.createElement("img")).src=w,o(m).toDataURL());v.style[C]=b.replace(x,function(e,t){return"("+L+")"})}catch(e){a.externalImageHandler.init(v,w)}}}else{var R=i.apply(null,b.match(/\d+/g));v.style[C]=b="rgb("+R+","+R+","+R+")"}}}}};return g.reset=function(e){if(e&&e[0]&&e.length&&e[0].nodeName)for(var t=Array.prototype.slice.call(e),o=-1,l=t.length;++o<l;)g.reset.call(this,t[o]);else if(e=e||document.documentElement,document.createElement("canvas").getContext)for(var i=c(e),d=-1,s=i.length;++d<s;){var m=i[d];if("img"===m.nodeName.toLowerCase()){var u=m.getAttribute("src");r(u)&&a.externalImageHandler.reset(m,u),m.src=n(m).realSRC||u}else for(var f=0,p=a.colorProps.length;f<p;f++){n(m).externalBG&&a.externalImageHandler.reset(m);var v=a.colorProps[f];m.style[v]=n(m)[v]||""}}else e.style.filter="progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)"},g.prepare=function(e){if(e&&e[0]&&e.length&&e[0].nodeName)for(var t=Array.prototype.slice.call(e),a=-1,i=t.length;++a<i;)g.prepare.call(null,t[a]);else if(e=e||document.documentElement,document.createElement("canvas").getContext)for(var d=c(e),s=-1,m=d.length;++s<m;){var u=d[s];if(n(u).skip)return;if("img"===u.nodeName.toLowerCase())u.getAttribute("src")&&!r(u.src)&&o(u,!0);else{var f=l(u,"backgroundImage");if(f.indexOf("url(")>-1){var p=f.match(/\(['"]?(.+?)['"]?\)/)[1];if(!r(p)){var v=document.createElement("img");v.src=p,o(v,!0,u)}}}}},g}();var IEVersion=function(){var e=window.navigator.userAgent,n=e.indexOf("MSIE ");if(n>0)return parseInt(e.substring(n+5,e.indexOf(".",n)),10);if(e.indexOf("Trident/")>0){var r=e.indexOf("rv:");return parseInt(e.substring(r+3,e.indexOf(".",r)),10)}var i=e.indexOf("Edge/");return i>0&&parseInt(e.substring(i+5,e.indexOf(".",i)),10)};11!=IEVersion()&&10!=IEVersion()||(grayscale(document.body),grayscale(document.getElementsByTagName("img")));

不足之处

grayscale.js 的大致原理是对原图 (img) 或原背景图 (background-image) 进行 BASE64 转换。在此过程中，页面会出现一段时间白屏。有时会出现部分原图 (img) 或原背景图 (background-image) 转换失败，依然显示为彩色。CSS 样式中使用绝对地址的背景图 (background-image) 转换也会失败，依然显示为彩色。

其他方法

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

修改 X-UA-Compatible 属性值为 IE=9，此设置可能会导致 IE 浏览器中页面的布局或交互行为产生异常。如果已经进行过严格的兼容性测试，可使用此方法。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment