跨浏览器图像灰度(grayscale)解决方案

E10开始抛弃了这种私有滤镜,但是还没有提供对标准CSSfilter的支持,所以说IE10以上版本的灰度图像,仍然是一个问题。
2.W3c CSS filter方式
CSS3中借鉴IE私有滤镜的方式提供了标准的CSS Filter方案,里面可以支持grayscale灰度、sepia褐色、saturate饱和度、hue-rotate色相旋转、invert反色、opacity透明度、brightness亮度、contrast对比度、blur模糊、drop-shadow阴影等十种效果。关于CSS3 Filter大家可以参照以下教程:大漠的《CSS3 Filter的十种特效》和Adobe的《CSS Filter Lab》。
实现grayscale灰度图像的代码是这样的
[css] view plaincopy
img{  
 -webkit-filter: grayscale(100%);    /* webkit内核支持程度较好 */  
    -moz-filter: grayscale(100%);    /* 其他内核现在并不支持,为了将来兼容性书写 */  
     -ms-filter: grayscale(100%);  
      -o-filter: grayscale(100%);  
         filter: grayscale(100%);    /* 标准写法 */  
}  
其中grayscale()的取值为0%-100%,也可以用0-1取代,0%代表彩色图像,100%代表完全的灰度。
css filter的浏览器兼容情况如下,Chrome31+,Safari7+,Opera20+,ios Safari6+,Android Browser4.4+,Blackberry 10+均支持了-webkit-filter的方式,IE不支持,firefox不支持。

因此我们需要考虑IE和firefox的兼容方案,好在对于firefox来说支持SVG effects for HTML 方式,接下来我们予以介绍。
3.SVG effects for HTML方式
Firefox虽说不支持css filter,但是支持svg effects for html,html文件可以调用svg里面的效果,不仅仅是滤镜、还可以是mask、clip等,详细内容大家可以参照MDN上的一片文章《Applying SVG effects to HTML content》。
svg effects for html的浏览器兼容情况如下图所示。

首先,你需要在一个svg里声明滤镜,该svg可以内嵌到html文件里,也可以单独保存。
[html] view plaincopy
<svg xmlns="http://www.w3.org/2000/svg">  
 <filter id="grayscale">  
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>  
 </filter>  
</svg>  
如果该文件保存成了单独的文件gray.svg,我们可以在html文件里加以引用。
[css] view plaincopy
img{  
    filter:url(‘gray.svg#grayscale‘); /*灰度滤镜放在gray.svg文件的id叫做grayscale的滤镜里*/  
}  
如果该文件内嵌入了html文件里,则是这样引用
[css] view plaincopy
img{  
    filter:url(‘#grayscale‘); /*svg滤镜内嵌入了html文件*/  
}  
当然,我们也可以直接把svg文件打包嵌入到css里,如果你没有代码洁癖的话
[css] view plaincopy
img {    
        filter: url(‘url("data:image/svg+xml;utf8,<svg%20xmlns=‘http://www.w3.org/2000/svg‘><filter%20id=‘grayscale‘><feColorMatrix%20type=‘matrix‘%20values=‘0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%
200.3333%200%200%200%200%200%201%200‘/></filter></svg>#grayscale");‘)    
}   
上面的方式,我们可以兼容大部分的浏览器(除了IE10、IE11),兼容的grayscale代码如下。
[css] view plaincopy
img{  
    -webkit-filter: grayscale(100%);            /* CSS3 filter方式,webkit内核方式,firefox外的绝大部分的现代浏览器*/  
       -moz-filter: grayscale(100%);            /* 目前没有实现 */  
        -ms-filter: grayscale(100%);  
         -o-filter: grayscale(100%);  
            filter: grayscale(100%);            /* CSS3 filter方式,标准写法*/  
            filter: url(filters.svg#grayscale); /* Firefox 4+ */  
            filter: gray;                       /* IE 6-9 */  
}  
img:hover{  
    -webkit-filter: grayscale(0%);  
       -moz-filter: grayscale(0%);  
        -ms-filter: grayscale(0%);  
         -o-filter: grayscale(0%);  
            filter: grayscale(0%);  
            filter: none; /* Firefox 4+, IE 6-9 */  
}  
4.js实现
对于IE10、11,我们怎么办呢?就得用js啦。
[javascript] view plaincopy
var imgObj = document.getElementById(‘imgToGray‘);   
  
function gray(imgObj) {  
    var canvas = document.createElement(‘canvas‘);  
    var canvasContext = canvas.getContext(‘2d‘);  
  
    var imgW = imgObj.width;  
    var imgH = imgObj.height;  
    canvas.width = imgW;  
    canvas.height = imgH;  
  
    canvasContext.drawImage(imgObj, 0, 0);  
    var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);  
  
    for (var y = 0; y < imgPixels.height; y++) {  
        for (var x = 0; x < imgPixels.width; x++) {  
            var i = (y * 4) * imgPixels.width + x * 4;  
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;  
            imgPixels.data[i] = avg;  
            imgPixels.data[i + 1] = avg;  
            imgPixels.data[i + 2] = avg;  
        }  
    }  
    canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);  
    return canvas.toDataURL();  
}  
imgObj.src = gray(imgObj);  
该解决方案主要参考ajaxblender的《Convert Images to Grayscale》,大家可以继续阅读查阅详情。
5.跨浏览器解决方案
该方案主要参考《Cross-Browser Grayscale image example using CSS3 + JS v2.0. With browser feature detection using Modernizr》实现,英语没问题的童鞋可以移步观赏。博主写了两篇关于使用js实现跨浏览器解决灰度图像问题的博客,第一篇自行实现浏览器检测,第二篇使用了Modernizr。
该解决方案使用了jQuery和Modernizr,所以需要引入,此处省略,不知道怎么引入的童鞋,请自觉撞南墙100次。
对于IE浏览器
[javascript] view plaincopy
// IE 10 only CSS properties  
var ie10Styles = [  
‘msTouchAction‘,  
‘msWrapFlow‘];  
  
var ie11Styles = [  
‘msTextCombineHorizontal‘];  
  
/* 
* Test all IE only CSS properties 
*/  
  
var d = document;  
var b = d.body;  
var s = b.style;  
var brwoser = null;  
var property;  
  
// Tests IE10 properties  
for (var i = 0; i < ie10Styles.length; i++) {  
    property = ie10Styles[i];  
    if (s[property] != undefined) {  
        brwoser = "ie10";  
    }  
}  
  
// Tests IE11 properties  
for (var i = 0; i < ie11Styles.length; i++) {  
    property = ie11Styles[i];  
    if (s[property] != undefined) {  
        brwoser = "ie11";  
    }  
}  
  
 //Grayscale images only on browsers IE10+ since they removed support for CSS grayscale filter  
 if(brwoser == "ie10" || brwoser == "ie11" ){  
    $(‘body‘).addClass(‘ie11‘); // Fixes marbin issue on IE10 and IE11 after canvas function on images  
    $(‘.grayscale img‘).each(function(){  
        var el = $(this);  
        el.css({"position":"absolute"}).wrap("<div class=‘img_wrapper‘ style=‘display: inline-block‘>").clone().addClass(‘img_grayscale ieImage‘).css({"position":"absolute","z-index":"5","opacity":"0"}).insertBefore(el).queue(function(){  
            var el = $(this);  
            el.parent().css({"width":this.width,"height":this.height});  
            el.dequeue();  
        });  
        this.src = grayscaleIe(this.src);  
    });  
  
    // Quick animation on IE10+   
    $(‘.grayscale img‘).hover(  
        function () {  
            $(this).parent().find(‘img:first‘).stop().animate({opacity:1}, 200);  
        },   
        function () {  
            $(‘.img_grayscale‘).stop().animate({opacity:0}, 200);  
        }  
    );  
  
    // Custom grayscale function for IE10 and IE11  
    function grayscaleIe(src){  
        var canvas = document.createElement(‘canvas‘);  
        var ctx = canvas.getContext(‘2d‘);  
        var imgObj = new Image();  
        imgObj.src = src;  
        canvas.width = imgObj.width;  
        canvas.height = imgObj.height;   
        ctx.drawImage(imgObj, 0, 0);   
        var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);  
        for(var y = 0; y < imgPixels.height; y++){  
            for(var x = 0; x < imgPixels.width; x++){  
                var i = (y * 4) * imgPixels.width + x * 4;  
                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;  
                imgPixels.data[i] = avg;   
                imgPixels.data[i + 1] = avg;   
                imgPixels.data[i + 2] = avg;  
            }  
        }  
        ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);  
        return canvas.toDataURL();  
    };  
 };  
对于其他浏览器
[javascript] view plaincopy
// If the browser does not support CSS filters filters, we are applying grayscale.js function  
// This part of Grayscale images applies on Opera, Firefox and Safari browsers  
if (!Modernizr.cssfilters) {  
    var $images = $(".grayscale img"), imageCount = $images.length, counter = 0;  
  
    // One instead of on, because it need only fire once per image  
    $images.one("load",function(){  
        // increment counter every time an image finishes loading  
        counter++;  
        if (counter == imageCount) {  
            // do stuff when all have loaded  
            grayscale($(‘.grayscale img‘));  
            $(".grayscale img").hover(  
                function () {  
                    grayscale.reset($(this));  
                },   
                function () {  
                    grayscale($(this));  
                }  
            );  
        }  
    }).each(function () {  
    if (this.complete) {  
        // manually trigger load event in  
        // event of a cache pull  
            $(this).trigger("load");  
        }  
    });  
}

时间: 2024-10-12 14:50:45

跨浏览器图像灰度(grayscale)解决方案的相关文章

jQuery高性能跨浏览器全屏幻灯片特效插件

Nex是一款效果炫酷的.高性能的跨浏览器全屏幻灯片特效jQuery插件.该幻灯片插件允许你嵌入图片.视频,甚至是谷歌地图.该幻灯片提供了7组共34种不同的效果,可以使你适用于任何场景下使用. 它的特点有: 幻灯片外观可以自定义 优化速度 支持移动触摸设备 支持键盘导航 支持选择各种Pattern 对SEO优化十分友好 10种类型效果:Fade, Slide [left,right,top,bottom], Zoom, Skew, Rotate, Random, None 5种颜色主题:ameth

java实现图像灰度化

/*在研究Java实现将一张图片转成字符画的时候,发现将图像转化字符串是根据照片的灰度采用不同的字符画出来,形成一个灰度表.于是就研究了下关于灰度值这个东西,于是跳了一个大坑...因为鄙人用的ubuntu,所以我的代码路径会有所不同.直接贴出原博文代码.故事的开始是这样的...*/ 1.关于Java实现将一张图片转成字符画(原文地址:http://blog.csdn.net/zhouli_05/article/details/7913263) 怎么样用Java实现将一张图片转成字符画?? 输入:

跨域AJAX请求的解决方案

同源策略 : http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html 在AJAX应用环境中,由于安全的原因,浏览器不允许XMLHttpRequest组件请求跨域资源.在很多情况下,这个限制给我来带来的诸多不 便.很多同行,研究了各种各样的解决方案: 1. 通过修改document.domain和隐藏的IFrame来实现跨域请求.这种方案可能是最简单的一种跨域请求的方案,但是它同样是一种限制最大的方 案.首先,它只能实现在同一个

实现跨浏览器html5表单验证

div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: right; clear: right; } .clearfix:after{ content: ""; display:block; clear: both; } .figcaption{ clear: both; color: #999; padding-top: 10px; text

Microsoft SilverLightt是一个跨浏览器的、跨平台的插件,为网络带来下一代基于.NETFramework的媒体体验和丰富的交互式应用程序。

Microsoft Silverlight是一个跨浏览器的.跨平台的插件,为网络带来下一代基于.NETFramework的媒体体验和丰富的交互式应用程序.Silverlight提供灵活的编程模型,并可以很方便地集成到现有的网络应用程序中.Silverlight可以对运行在Mac或Windows上的主流浏览器提供高质量视频信息的快速.低成本的传递. Microsoft Silverlight的中文名为"微软银光",是一种新的Web呈现技术,能在各种平台上运行.借助该技术,您将拥有内容丰富

[译] 如何调试CSS的跨浏览器样式bug

http://www.cnblogs.com/newyorker/archive/2013/01/22/2870682.html 原文 http://www.stubbornella.org/content/2012/05/02/cross-browser-debugging-css/ 作者为YAHOO前端工程师. 首先要做的是挑选一个好的浏览器.我的选择是Chrome,因为它拥有强大的调试工具.当我在Chrome上完成调试后,我会接着在Safari或者Firefox上调试. 如果在这些“好的”

构建自动化、跨浏览器的 JavaScript 单元测试

我们都知道在多个浏览器中测试我们的代码是多么的重要.至少在我们发布第一个项目的时候,我认为我们在网络开发社区做大部分工作还是相当不错的. 我们做的不够好的工作是测试代码时每一次做出的改变. 我个人对此感到很惭愧.我已经把"学习如何构建自动化.跨浏览器的JavaScript的单元测试"列在我的年度to-do清单中,但我每一次坐下来真正想要做的时候,我又退却了.虽然我肯定这一部分原因是因为我的懒惰,同时我认为这也是由于缺乏良好的可用信息在这个主题上. 有许多工具和框架(例如 Karma)宣

如何在跨浏览器测试中提高效率

Web端应用测试主要障碍之一就是在不同的浏览器上"测试他们的网站/应用程序",也称为"跨浏览器测试"或者"兼容性测试". 浏览器和浏览器版本很多(Google Chrome,Mozilla Firefox,Internet Explorer,Microsoft Edge,Opera,Yandex等),可以通过多种设备(通过台式机,笔记本,智能手机,平板电脑等)访问网站/应用. )以及可能用于访问网站的多种操作系统(Windows,MacOS,Li

常见浏览器兼容性问题与解决方案【转】

常见浏览器兼容性问题与解决方案 原文:http://blog.csdn.net/chuyuqing/article/details/37561313/ 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按