實現圖像灰度(grayscale)最初有ie6推出的專屬屬性filter實現，后來在css3里w3c實現了標準的filter，但是在不同瀏覽器的實現程度不一樣，因此需要一種瀏覽器兼容的解決方案。

IE私有濾鏡的方式：自IE4開始，IE引入了私有濾鏡，可以實現透明度、模糊、陰影、發光等效果，當然也可以實現灰度圖像效果。代碼如下：

img {

filter: gray; /* just for IE6-9 */

}

IE10開始拋棄了這種私有濾鏡，但是還沒有提供對標準CSSfilter的支持，所以說IE10以上版本的灰度圖像，仍然是一個問題。

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灰度圖像的代碼是這樣的：

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 方式，接下來我們予以介紹。

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文件里，也可以單獨保存。

如果該文件保存成了單獨的文件gray.svg，我們可以在html文件里加以引用。

img{

filter:url('gray.svg#grayscale'); /*灰度濾鏡放在gray.svg文件的id叫做grayscale的濾鏡里*/

}

如果該文件內嵌入了html文件里，則是這樣引用

img{

filter:url('#grayscale'); /*svg濾鏡內嵌入了html文件*/

}

當然，我們也可以直接把svg文件打包嵌入到css里，如果你沒有代碼潔癖的話

img {

filter: url('url("data:image/svg+xml;utf8,

200.3333%200%200%200%200%200%201%200'/>

#grayscale");')

}

上面的方式，我們可以兼容大部分的瀏覽器(除了IE10、IE11)，兼容的grayscale代碼如下。

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 */

}

js實現

對于IE10、11，我們怎么辦呢？就得用js啦。

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》，大家可以繼續閱讀查閱詳情。

跨瀏覽器解決方案：該方案主要參考《Cross-Browser Grayscale image example using CSS3 + JS v2.0. With browser feature detection using Modernizr》實現，英語沒問題的童鞋可以移步觀賞。博主寫了兩篇關于使用js實現跨瀏覽器解決灰度圖像問題的博客，第一篇自行實現瀏覽器檢測，第二篇使用了Modernizr。該解決方案需要引入jQuery和Modernizr。

IE瀏覽器

// 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("

").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();

};

};

其他瀏覽器

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

}

});

}

總結

以上是生活随笔為你收集整理的html5图片灰度显示,实现各浏览器html图像灰度 跨浏览器图像灰度(grayscale)解决方案...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。