如何基于filter实现网站整体变灰功能

前言

*网站会遇到公祭日的时候，网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大家。方案简单实用，笔者已在生产环境使用过。通过整体的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<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;

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

<script type="text/javascript">
 var navstr = navigator.useragent.tolowercase();
 if(navstr.indexof("msie 10.0")!==-1||navstr.indexof("rv:11.0")!==-1){ // 判断是ie10或者ie11
  $(function () {
    grayscale($('body'));
  })
 }
</script>

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

总结

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。