• 设置网站置灰 css / js

    一键设置网页置灰 css写法，但是css在IE中兼容可能不太好

    1. html{
    2.     -webkit-filter: grayscale(100%);/* webkit */
    3.     -moz-filter: grayscale(100%);/*firefox*/
    4.     -ms-filter: grayscale(100%);/*ie9*/
    5.     -o-filter: grayscale(100%);/*opera*/
    6.     filter: grayscale(100%);
    7.     filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    8.     -webkit-filter: gray;
    9.     filter: gray;
    10. }
    11. body{
    12.    filter:gray; /*ie9- */
    13.    background : none!important;
    14. }

    grayscale.js 通过js控制

    调用

    1. //1、整个页面变成灰色
    2. grayscale(document.body);  
    3.  
    4. //2、指定某个元素变灰色
    5. grayscale(document.getElementById(元素ID));
    6.  
    7. //3、指定某个元素不变成灰色
    8. grayscale.reset(document.getElementById(元素ID));

    以下是grayscale.js

    1. /*
    2.  * -- grayscale.js --
    3.  * Copyright (C) James Padolsey (http://james.padolsey.com)
    4.  *
    5.  */
    6.  
    7. var grayscale = (function(){
    8.     
    9.     var config = {
    10.             colorProps: ['color','backgroundColor','borderBottomColor','borderTopColor','borderLeftColor','borderRightColor','backgroundImage'],
    11.             externalImageHandler : {
    12.                 /* Grayscaling externally hosted images does not work
    13.                    - Use these functions to handle those images as you so desire */
    14.                 /* Out of convenience these functions are also used for browsers
    15.                    like Chrome that do not support CanvasContext.getImageData */
    16.                 init : function(el, src) {
    17.                     if (el.nodeName.toLowerCase() === 'img') {
    18.                         // Is IMG element...
    19.                     } else {
    20.                         // Is background-image element:
    21.                         // Default - remove background images
    22.                         data(el).backgroundImageSRC = src;
    23.                         el.style.backgroundImage = '';
    24.                     }
    25.                 },
    26.                 reset : function(el) {
    27.                     if (el.nodeName.toLowerCase() === 'img') {
    28.                         // Is IMG element...
    29.                     } else {
    30.                         // Is background-image element:
    31.                         el.style.backgroundImage = 'url(' + (data(el).backgroundImageSRC || '') + ')';
    32.                     }
    33.                 }
    34.             }
    35.         },
    36.         log = function(){
    37.             try { window.console.log.apply(console, arguments); }
    38.             catch(e) {};
    39.         },
    40.         isExternal = function(url) {
    41.             // Checks whether URL is external: 'CanvasContext.getImageData'
    42.             // only works if the image is on the current domain.
    43.             return (new RegExp('https?://(?!' + window.location.hostname + ')')).test(url);
    44.         },
    45.         data = (function(){
    46.             
    47.             var cache = [0],
    48.             expando = 'data' + (+new Date());
    49.             
    50.             return function(elem) {
    51.                 var cacheIndex = elem[expando],
    52.                     nextCacheIndex = cache.length;
    53.                 if(!cacheIndex) {
    54.                     cacheIndex = elem[expando] = nextCacheIndex;
    55.                     cache[cacheIndex] = {};
    56.                 }
    57.                 return cache[cacheIndex];
    58.             };
    59.             
    60.         })(),
    61.         desatIMG = function(img, prepare, realEl) {
    62.             
    63.             // realEl is only set when img is temp (for BG images)
    64.             
    65.             var canvas = document.createElement('canvas'),
    66.                 context = canvas.getContext('2d'),
    67.                 height = img.naturalHeight || img.offsetHeight || img.height,
    68.                 width = img.naturalWidth || img.offsetWidth || img.width,
    69.                 imgData;
    70.                 
    71.             canvas.height = height;
    72.             canvas.width = width;
    73.             context.drawImage(img, 0, 0);
    74.             try {
    75.                 imgData = context.getImageData(0, 0, width, height);
    76.             } catch(e) {}
    77.             
    78.             if (prepare) {
    79.                 desatIMG.preparing = true;
    80.                 // Slowly recurse through pixels for prep,
    81.                 // :: only occurs on grayscale.prepare()
    82.                 var y = 0;
    83.                 (function(){
    84.                     
    85.                     if (!desatIMG.preparing) { return; }
    86.                     
    87.                     if (y === height) {
    88.                         // Finished!
    89.                         context.putImageData(imgData, 0, 0, 0, 0, width, height);
    90.                         realEl ? (data(realEl).BGdataURL = canvas.toDataURL())
    91.                                : (data(img).dataURL = canvas.toDataURL())
    92.                     }
    93.                     
    94.                     for (var x = 0; x < width; x++) {
    95.                         var i = (y * width + x) * 4;
    96.                         // Apply Monoschrome level across all channels:
    97.                         imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] =
    98.                         RGBtoGRAYSCALE(imgData.data[i], imgData.data[i+1], imgData.data[i+2]);
    99.                     }
    100.                     
    101.                     y++;
    102.                     setTimeout(arguments.callee, 0);
    103.                     
    104.                 })();
    105.                 return;
    106.             } else {
    107.                 // If desatIMG was called without 'prepare' flag
    108.                 // then cancel recursion and proceed with force! (below)
    109.                 desatIMG.preparing = false;
    110.             }
    111.             
    112.             for (var y = 0; y < height; y++) {
    113.                 for (var x = 0; x < width; x++) {
    114.                     var i = (y * width + x) * 4;
    115.                     // Apply Monoschrome level across all channels:
    116.                     imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] =
    117.                     RGBtoGRAYSCALE(imgData.data[i], imgData.data[i+1], imgData.data[i+2]);
    118.                 }
    119.             }
    120.             
    121.             context.putImageData(imgData, 0, 0, 0, 0, width, height);
    122.             return canvas;
    123.         
    124.         },
    125.         getStyle = function(el, prop) {
    126.             var style = document.defaultView && document.defaultView.getComputedStyle ? 
    127.                         document.defaultView.getComputedStyle(el, null)[prop]
    128.                         : el.currentStyle[prop];
    129.             // If format is #FFFFFF: (convert to RGB)
    130.             if (style && /^#[A-F0-9]/i.test(style)) {
    131.                     var hex = style.match(/[A-F0-9]{2}/ig);
    132.                     style = 'rgb(' + parseInt(hex[0], 16) + ','
    133.                                    + parseInt(hex[1], 16) + ','
    134.                                    + parseInt(hex[2], 16) + ')';
    135.             }
    136.             return style;
    137.         },
    138.         RGBtoGRAYSCALE = function(r,g,b) {
    139.             // Returns single monochrome figure:
    140.             return parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );
    141.         },
    142.         getAllNodes = function(context) {
    143.             var all = Array.prototype.slice.call(context.getElementsByTagName('*'));
    144.             all.unshift(context);
    145.             return all;
    146.         };
    147.         
    148.     var init = function(context) {
    149.         
    150.         // Handle if a DOM collection is passed instead of a single el:
    151.         if (context && context[0] && context.length && context[0].nodeName) {
    152.             // Is a DOM collection:
    153.             var allContexts = Array.prototype.slice.call(context),
    154.                 cIndex = -1, cLen = allContexts.length;
    155.             while (++cIndexcall(this, allContexts[cIndex]); }
    156.             return;
    157.         }
    158.         
    159.         context = context || document.documentElement;
    160.         
    161.         if (!document.createElement('canvas').getContext) {
    162.             context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
    163.             context.style.zoom = 1;
    164.             return;
    165.         }
    166.         
    167.         var all = getAllNodes(context),
    168.             i = -1, len = all.length;
    169.             
    170.         while (++i
    171.             var cur = all[i];
    172.             
    173.             if (cur.nodeName.toLowerCase() === 'img') {
    174.                 var src = cur.getAttribute('src');
    175.                 if(!src) { continue; }
    176.                 if (isExternal(src)) {
    177.                     config.externalImageHandler.init(cur, src);
    178.                 } else {
    179.                     data(cur).realSRC = src;
    180.                     try {
    181.                         // Within try statement just encase there's no support....
    182.                         cur.src = data(cur).dataURL || desatIMG(cur).toDataURL();
    183.                     } catch(e) { config.externalImageHandler.init(cur, src); }
    184.                 }
    185.                 
    186.             } else {
    187.                 for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {
    188.                     var prop = config.colorProps[pIndex],
    189.                     style = getStyle(cur, prop);
    190.                     if (!style) {continue;}
    191.                     if (cur.style[prop]) {
    192.                         data(cur)[prop] = style;
    193.                     }
    194.                     // RGB color:
    195.                     if (style.substring(0,4) === 'rgb(') {
    196.                         var monoRGB = RGBtoGRAYSCALE.apply(null, style.match(/\d+/g));
    197.                         cur.style[prop] = style = 'rgb(' + monoRGB + ',' + monoRGB + ',' + monoRGB + ')';
    198.                         continue;
    199.                     }
    200.                     // Background Image:
    201.                     if (style.indexOf('url(') > -1) {
    202.                         var urlPatt = /\(['"]?(.+?)['"]?\)/,
    203.                             url = style.match(urlPatt)[1];
    204.                         if (isExternal(url)) {
    205.                             config.externalImageHandler.init(cur, url);
    206.                             data(cur).externalBG = true;
    207.                             continue;
    208.                         }
    209.                         // data(cur).BGdataURL refers to caches URL (from preparation)
    210.                         try {
    211.                             var imgSRC = data(cur).BGdataURL || (function(){
    212.                                     var temp = document.createElement('img');
    213.                                     temp.src = url;
    214.                                     return desatIMG(temp).toDataURL();
    215.                                 })();
    216.                             
    217.                             cur.style[prop] = style.replace(urlPatt, function(_, url){
    218.                                 return '(' + imgSRC + ')';
    219.                             });
    220.                         } catch(e) { config.externalImageHandler.init(cur, url); }
    221.                     }
    222.                 }
    223.             }
    224.         }
    225.         
    226.     };
    227.     
    228.     init.reset = function(context) {
    229.         // Handle if a DOM collection is passed instead of a single el:
    230.         if (context && context[0] && context.length && context[0].nodeName) {
    231.             // Is a DOM collection:
    232.             var allContexts = Array.prototype.slice.call(context),
    233.                 cIndex = -1, cLen = allContexts.length;
    234.             while (++cIndexreset.call(this, allContexts[cIndex]); }
    235.             return;
    236.         }
    237.         context = context || document.documentElement;
    238.         if (!document.createElement('canvas').getContext) {
    239.             context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)';
    240.             return;
    241.         }
    242.         var all = getAllNodes(context),
    243.             i = -1, len = all.length;
    244.         while (++i
    245.             var cur = all[i];
    246.             if (cur.nodeName.toLowerCase() === 'img') {
    247.                 var src = cur.getAttribute('src');
    248.                 if (isExternal(src)) {
    249.                     config.externalImageHandler.reset(cur, src);
    250.                 }
    251.                 cur.src = data(cur).realSRC || src;
    252.             } else {
    253.                 for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {
    254.                     if (data(cur).externalBG) {
    255.                         config.externalImageHandler.reset(cur);
    256.                     }
    257.                     var prop = config.colorProps[pIndex];
    258.                     cur.style[prop] = data(cur)[prop] || '';
    259.                 }
    260.             }
    261.         }
    262.     };
    263.     
    264.     init.prepare = function(context) {
    265.         
    266.         // Handle if a DOM collection is passed instead of a single el:
    267.         if (context && context[0] && context.length && context[0].nodeName) {
    268.             // Is a DOM collection:
    269.             var allContexts = Array.prototype.slice.call(context),
    270.                 cIndex = -1, cLen = allContexts.length;
    271.             while (++cIndexprepare.call(null, allContexts[cIndex]); }
    272.             return;
    273.         }
    274.         
    275.         // Slowly recurses through all elements
    276.         // so as not to lock up on the user.
    277.         
    278.         context = context || document.documentElement;
    279.         
    280.         if (!document.createElement('canvas').getContext) { return; }
    281.         
    282.         var all = getAllNodes(context),
    283.             i = -1, len = all.length;
    284.         
    285.         while (++i
    286.             var cur = all[i];
    287.             if (data(cur).skip) { return; }
    288.             if (cur.nodeName.toLowerCase() === 'img') {
    289.                 if (cur.getAttribute('src') && !isExternal(cur.src)) {
    290.                     desatIMG(cur, true);
    291.                 }
    292.                 
    293.             } else {
    294.                 var style = getStyle(cur, 'backgroundImage');
    295.                 if (style.indexOf('url(') > -1) {
    296.                     var urlPatt = /\(['"]?(.+?)['"]?\)/,
    297.                         url = style.match(urlPatt)[1];
    298.                     if (!isExternal(url)) {
    299.                         var temp = document.createElement('img');
    300.                         temp.src = url;
    301.                         desatIMG(temp, true, cur);
    302.                     }
    303.                 }
    304.             }
    305.         }
    306.     };
    307.     
    308.     return init;
    309.  
    310. })();

  • 相关阅读:
    PowerBI 首购用户分析（Tableau经典案例复刻）
    【css】H8_定位
    如何在 Protocol Buffers (Proto) 文件中弃用一个字段
    Coredump-Z: map 释放后再使用的问题；多线程
    Vue极简教程，相关指令详解
    小白学习笔记—网络安全/黑客技术
    初识exception
    windows命令行查看和终止进程
    【韭菜拾遗】Coqui TTS: a deep learning toolkit for Text-to-Speech
    Python计算均值、方差、标准差、协方差等常用指标的方法——Numpy模块+Pandas模块
  • 原文地址：https://blog.csdn.net/qq_39109182/article/details/128130307