filter实现网站整体变灰功能的方法

这篇文章主要讲解了filter实现网站整体变灰功能的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

创新互联建站主要从事网站制作、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务固安,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

前言

政府网站会遇到公祭日的时候，网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大家。方案简单实用，笔者已在生产环境使用过。通过整体的html使用filter来进行过滤。如下，只要引入即可。

解决方案

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的解决方案

经过测试发现，以上代码的方式对于谷歌，火狐，IE8，9都很好使。对于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;

})();
使用方式如下，中心思想就是当我们是ie10和ie11浏览器的时候，调用graystyle的js函数。

这里建议直接捕捉body，如果想针对某一个，换其中的捕捉元素就可以。

总结

至此，网站变灰的方案就完美了。完美兼容各种浏览器，笔者已经在生产环境使用过了，大家放心使用。

看完上述内容，是不是对filter实现网站整体变灰功能的方法有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。

标题名称：filter实现网站整体变灰功能的方法
链接URL：http://cqcxhl.com/article/ijjggd.html

重庆分公司，新征程启航

filter实现网站整体变灰功能的方法

其他资讯