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


Posted in Javascript onApril 17, 2020

前言

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

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,如果想针对某一个,换其中的捕捉元素就可以。

总结

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 #Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 #Javascript
vue制作抓娃娃机的示例代码
Apr 17 #Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 #Javascript
tracking.js实现前端人脸识别功能
Apr 16 #Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 #Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 #Javascript
You might like
php UTF8 文件的签名问题
2009/10/30 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
js DataSet数据源处理代码
2010/03/29 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
python实现获取Ip归属地等信息
2016/08/27 Python
python如何实现int函数的方法示例
2018/02/19 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
python分数表示方式和写法
2019/06/26 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
机械专业应届生求职信
2013/09/21 职场文书
信息总监管理职责范本
2014/03/08 职场文书
2015年加油站工作总结
2015/05/13 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书