使用JavaScript实现网页去彩

序言

在一些纪念日网站会将网页中的颜色去掉变成灰黑模式。如下所示。

因为网页使用了静态化的技术，所以最好是只是用JavaScript就能实现自动选择相关模式并设置，而且尽可能统一配置。

实现

灰黑模式的实现

使用了css的filter 属性。给html整体添加滤镜。属性的具体使用可此查看filter CSS属性

自动化配置

我的思路是使用JavaScript判断一个配置文件是否存在。如果存在的话，则是灰黑模式，不存在则是彩色模式。但是要注意处理ajax的缓存问题。

代码

将所有的JavaScript的内容都放入了gray.js中

function autoSetGrayMode() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest(); //其他浏览器    
    } else if (window.ActiveXObject) {
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //旧版IE    
        } catch (e) {}
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //新版IE    
        } catch (e) {}
        if (!xmlhttp) {
            window.alert("不能创建XMLHttpRequest对象");
        }
    }
    yourFileURL = "http://192.168.32.64:8080/yibing/gray_config.html?fresh=" + Math.random(); ;
   // xmlhttp.setRequestHeader("Cache-Control","no-cache");
    xmlhttp.open("GET", yourFileURL, false);
    xmlhttp.send();
    if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200)

            changeToGray(true);
        else
            changeToGray(false);
    }
}

function changeToGray(crayMode) {

    var element = document.body;
    if (crayMode) {
        element.style.cssText = ' filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);';
    } else {
        element.style.cssText = '';
    }
}

在需要使用的html页面中，如下使用。

<script type="text/javascript">
 $(document).ready(function(){
 	  autoSetGrayMode();                    
}); 
</script>

效果

目前通过测试，发现网页在浏览器打开正常，视频也可以实现灰度模式。但是在移动设备中，含有视频的页面，显示的是灰色的。但是点击视频播放，将会弹出一个播放窗口，播放窗口中的视频时彩色的。在IOS设备中部分出现无法播放的问题，和卡顿的问题。需要针对video 标签继续优化。