6种有趣的图片灰度转换算法

虽然黑白照片的时代已经过去，但是现在看以前的照片，有回到过去的感觉，很酷又木质的感觉〜

阅读本文后，您可以将彩色照片转换成各种黑白照片.

本文中完整的示例图像灰度算法示例. 示例图片有点太多，可能会有点慢.

示例的源代码位于blog / demo中

原色是指无法通过混合其他颜色获得的“基本色”. 一般来说，叠加类型的三种原色是红色，绿色和蓝色. 将原色按不同比例混合以产生其他新色. 这种原色系统通常称为“ RGB颜色空间”，它是由红色（R）绿色（G）蓝色（B）组成的颜色系统.

当三种原色按相等比例叠加在一起时，它们将变为灰色；如果将三种原色的强度调整为最大并重叠相等的量，它们将显示为白色. 灰度表示没有颜色，并且RGB颜色分量都相等.

该算法不区分语言. 这里我们以前端为例. 您可以使用画布获取图片特定区域的像素数据

//伪代码
var img = new Image();
img.src = 'xxx.jpg';
var myCanvas = document.querySelector(canvasId);
var canvasCtx = myCanvas.getContext("2d");
canvasCtx.drawImage(img, 0, 0, img.width, img.height);
//图片的像素数据
var data = canvasCtx.getImageData(0, 0, img.width, img.height);

使用getImageData（）返回ImageData对象. 该对象的数据属性就是我们想要的数据. 数据是Uint8ClampedArray描述的一维数组，其中包含RGBA顺序的数据. 数据使用0到255（包括）的整数表示形式. 因此，一个像素将具有4个数据（RGBA），RGB是红色，绿色和蓝色，A表示透明度.

一个例子: 本文中的720480的水果图片共有720480 = 259200像素，每个像素有4个数据，因此数据数组的总长度为259200 * 4 = 1036800.

可以看出图片的数据很长. 如果一次处理很多图片，则计算量很大，因此在此示例中，将使用工作程序将繁重的计算任务移交给后台线程.

获取每个像素的红色，绿色和蓝色值.

使用灰度算法来计算灰度值.

使用此灰度值替换像素的原始红色，绿色和蓝色值.

例如，我们的灰度算法是:

Gray = (Red + Green + Blue) / 3

计算过程:

//伪代码
for(var Pixel in Image){
  var Red = Image[Pixel].Red
  var Green = Image[Pixel].Green
  var Blue = Image[Pixel].Blue
  var Gray = (Red + Green + Blue) / 3
  Image[Pixel].Red = Gray
  Image[Pixel].Green = Gray
  Image[Pixel].Blue = Gray
}

简单，对.

很多美味的鲜果，但很快就会变成灰色！ ！

这是最常见的灰度算法，简单的蛮力，放在首位. 公式是:

 Gray = (Red + Green + Blue) / 3

该算法可以产生良好的灰度值，因为公式简单，因此易于维护和优化. 但是，它并非没有缺点，因为它既简单又快速. 从人眼的角度来看，图片的灰色阴影和亮度不够好. 因此，我们需要更复杂的操作.

由算法1和算法2生成的图像似乎没有太大区别，因此添加一个示例，并将算法1用于图像的上半部分，将算法2用于图像的下半部分.

如果仔细观察，中间会出现黑线. 上半部分（算法1）比下半部分（算法2）浅. 如果仍然看不到它，请注意最右边的柠檬. 算法1的柠檬更具反射性，算法2的柠檬较柔和.

第二种算法考虑到人眼感知的光水平不同. 人眼中有几个锥形感光细胞，它们对黄绿色，绿色和蓝紫色光最敏感. 尽管眼球中的椎细胞对红色，绿色和蓝色不是最敏感，但是裸眼的椎细胞可以感觉到的光带宽很大，而红照片美化算法，绿和蓝色可以独立地刺激各种光的颜色.

人类对红色，绿色和蓝色三种颜色的感知是有序的: 绿色>红色>蓝色，因此从这个角度来看，求平均算法是不科学的. 应该根据人类对光的感知对每种颜色赋予权重，并且它们的状态不应相等.

图像处理的一般公式为:

Gray = (Red * 0.3 + Green * 0.59 + Blue * 0.11)

如您所见，每种颜色的系数相差很大.

用于图像灰度处理的最佳公式仍存在争议. 有一些类似的公式:

Gray = (Red * 0.2126 + Green * 0.7152 + Blue * 0.0722)

或

Gray = (Red * 0.299 + Green * 0.587 + Blue * 0.114)

它们的系数略有偏差，并且比率大致相同.

在讨论此算法之前，让我们先谈谈RGB. 大多数程序员使用RGB模型. 每种颜色可以由红色，绿色和蓝色组成. RGB可以很好地描述计算机的颜色，但对于人类来说却很难理解. 如果您升起国旗并说“ RGB（255，0，42）如何是五星级红旗”，您可能会被殴打. 但是我说过亮红色的五星级红旗，老师可能会点头和赞扬.

因此，为了便于理解，有时我们选择HLS模型来描述颜色. 这三个字母分别代表色相，色相，饱和度和亮度. 色相，值是: 0-360，0（或360）表示红色，120表示绿色，240表示蓝色，其他值也可以用来指定颜色. 饱和度，值是: 0.0％-100.0％，通常是指颜色的鲜艳度. 亮度，值为: 0.0％-100.0％，黑色的亮度为0.

去饱和度的过程是将RGB转换为HLS，然后将饱和度设置为0. 因此，我们需要获取一种颜色并将其转换为最不饱和的值. 这个数学公式比本文介绍的公式复杂. 这是一个简单的公式. 通过计算RGB中最大值和最小值的中间值可以使像素去饱和:

Gray = ( Math.max(Red, Green, Blue) + Math.min(Red, Green, Blue) ) / 2

去饱和后，图片的三维度降低，但更柔和. 比较算法2，您可以清楚地看到区别. 从效果的角度来看，大多数人可能会喜欢算法2. 算法3是迄今为止处理的最弱和最暗的图像.

可以将分解算法视为一种更简单的去饱和方法. 分解基于每个像素，并且仅采用RGB的最大值或最小值.

最大分解:

Gray = Math.max(Red, Green, Blue)

最小分解:

Gray = Math.min(Red, Green, Blue)

如上所示，最大分解提供更亮的图形，而最小分解提供更暗的图形.

将图片变灰的更快方法. 该方法无需进行任何计算，直接将通道的值作为灰度值.

Gray = Red

或

Gray = Green

或

Gray = Blue

信不信由你，大多数数码相机都使用此算法来生成灰度图像. 很难预测这种转换的结果照片美化算法，因此该算法主要用于艺术效果.

这是迄今为止最有趣的算法，允许用户提供2-256范围内的灰色阴影值. 2的结果是一张全白色的图片，而256的结果与算法1相同.

该算法通过选择阴影值来工作，其公式有点复杂

ConversionFactor = 255 / (NumberOfShades - 1)
AverageValue = (Red + Green + Blue) / 3
Gray = Math.round((AverageValue / ConversionFactor) + 0.5) * ConversionFactor

这是一篇非常有趣的文章，它不仅介绍了灰度算法，而且还有助于理解图像处理过程.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/shouji/article-172828-1.html