彩色图像转换成灰度图片‘’_将Web图像转换为灰度的3种方法

最新推荐文章于 2023-04-08 10:50:14 发布

cune1359

最新推荐文章于 2023-04-08 10:50:14 发布

阅读量688

点赞数

文章标签： java js opencv css javascript ViewUI

我一直是灰度图像的忠实拥护者，因为我认为它们看起来更具艺术感。许多照片编辑器（例如Photoshop）可让您轻松地将彩色图像转换为灰度图像。甚至还可以调整颜色深度和色调。不幸的是， 由于浏览器功能的差异，在Web上这样做不太容易。

在本文中，我们将逐步介绍一些可用于将图像变成灰度的方法。我们还将研究每种方法的绊脚石，最后，我们将结合使用这些方法来获得可在不同浏览器上运行的灰度图像。

1. CSS过滤器

使用CSS filter属性可能是将图像转换为灰度的最简单方法。过去，Internet Explorer具有一个专有CSS属性，称为filter以应用包括灰度在内的自定义效果。

如今， filter属性已成为CSS3规范的一部分，并且在某些浏览器（如Firefox，Chrome和Safari）中受支持。以前，我们还提到过Webkit过滤器，它不仅使我们可以将图像变成灰度，而且还可以应用棕褐色和模糊效果。

我们可以添加以下样式规则，以使用filter属性将图像变为灰度。

img {
	-webkit-filter: grayscale(1); /* Webkit */
	filter: gray; /* IE6-9 */
	filter: grayscale(1); /* W3C */
}

该代码将在IE6-9和Webkit浏览器（Chrome 18 +，Safari 6.0+和Opera 15+）中生效。

（注意： IE10放弃了对旧版IE filter支持，也不再支持前缀版本的-ms-filter ，以应用灰度级。此代码在Firefox中也不起作用。）

2. JavaScript

第二种选择是使用JavaScript，从技术上讲，它应该在所有启用JavaScript的浏览器（包括IE6及以下版本）中都可以工作。

这是Ajax Blender的代码。

var imgObj = document.getElementById('js-image');
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);

使用JavaScript方法，我们将能够在某些条件下应用灰度效果，例如当图像hover或被单击时。当图像从灰色过渡到全彩色时，我们还可以将其与jQuery效果一起使用以应用平滑的动画。使用JavaScript的唯一缺点是，当在浏览器中禁用JavaScript时，该效果将被丢弃。

3. SVG

另一种方法是使用SVG过滤器。

您需要做的就是创建一个SVG文件，并将以下代码放入其中。保存文件并将其命名为例如gray.svg 。

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

然后，使用filter属性，链接SVG文件，然后在SVG文件中链接filter元素的ID：

img {
	filter: url('img/gray.svg#grayscale');
}

您也可以像这样直接在CSS中嵌入代码。

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

这将返回相同的结果。

结论

为了对灰度效果具有跨浏览器的支持，我们可以使用以下代码片段将上述方法组合在一起。此代码将在Firefox 3.5 +，Opera 15 +，Safari，Chrome和Internet Explorer中应用灰度效果。

img {
	-webkit-filter: grayscale(100%);
	-webkit-filter: grayscale(1);
	filter: grayscale(100%);

	filter: url('../img/gray.svg#grayscale');
	filter: gray;
}

我们可以将上述代码与JavaScript方法一起使用，并且仅在禁用JavaScript的情况下提供CSS filter作为备用。借助Modernizr可以轻松实现此想法。

如果启用了JavaScript，Modernizr会在body添加js类，如果禁用，它将把类名切换为no-js 。使用CSS，您可以执行以下操作。

.no-js img {
	-webkit-filter: grayscale(100%);
	-webkit-filter: grayscale(1);
	filter: grayscale(100%);

	filter: url('../img/gray.svg#grayscale');
	filter: gray;
}

仅此而已，您可以在下面看到正在运行的演示：