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");
}
});
}