如何基于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 相关文章推荐
javascript prototype 原型链
Mar 12 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
获取body标签的两种方法
Oct 13 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 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具体实现代码
2010/10/12 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
为javascript添加String.Format方法
2020/08/11 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
python实现梯度下降法
2020/03/24 Python
python要安装在哪个盘
2020/06/15 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
python em算法的实现
2020/10/03 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
python实现发送邮件
2021/03/02 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
党校培训思想汇报
2014/01/03 职场文书
《手指教学》反思
2014/02/14 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
小学班级口号
2014/06/09 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python