canvas 图片处理-灰度

richardmyu commented 3 years ago

结合 ctx.getImageData 和 ctx.putImageData 可以对图片进行色值修改，其中一个有趣的方向是“灰度”处理。

一.基础概念

1.灰度 Gray scale

在数字摄影，计算机生成的图像和比色法中，灰度或 灰度图像 是这样一种图像，其中每个像素的值是一个仅代表光量的单个样本；也就是说，它仅携带强度信息。灰度图像是一种黑白或灰色单色图像，但仅由灰色阴影组成。对比度范围从最弱的黑色到最强的白色。_【1】

灰度图像与一比特的黑白图像不同，后者在计算机成像的背景下是仅具有两种颜色的图像：黑白（也称为双色或二进制图像）。灰度图像之间有许多灰色阴影。_【1】

如今，通常用于视觉显示（在屏幕上和打印的）的灰度图像（例如照片）通常每个采样像素以8位存储。该像素深度允许记录256种不同的强度（即灰色阴影），并且还简化了计算，因为每个像素样本都可以作为一个完整字节单独访问。但是，如果这些强度与它们在该像素处表示的物理光量成比例地均匀分布（称为线性编码或缩放），则相邻暗阴影之间的差异可能会很明显地成为条带伪影，而许多较亮的阴影会通过编码很多在感觉上无法区分的增量来“浪费”。因此，通常将阴影以 伽玛压缩的非线性比例 均匀分布，从而更好地近似于深色和浅色阴影的均匀感知增量，通常使这256个阴影足够（勉强）以避免明显的增量。_【1】

灰度值

将白色与黑色之间按明暗程度分为若干个等级，称为灰度级，灰度值表示了明暗的程度，数值范围一般 [0, 255]，灰度值越高越亮。_【6】

像素

组成一幅图像的基本单元，可用数字表示，称为像素值。但在不同的颜色空间模型下表示的方式不同，如 rgb 表示时像素值可表示为 [128,128,128]，若是 rgba 四通道时可表示为 [128,128,128,0.6]；当图像为只有单通道的黑白图像时，像素值可由一个数字表示，此时这个数字等于灰度值。_【6】

2.RGB

三原色光模式（RGB color model），又称 RGB颜色模型 或 红绿蓝颜色模型，是一种加色模型，将红（Red）、绿（Green）、蓝（Blue）三原色的色光以不同的比例相加，以合成产生各种色彩光。_【2】

每像素24位（bits per pixel，bpp）编码的 RGB 值：使用三个 8 位无符号整数（0 到 255）表示红色、绿色和蓝色的强度。这是当前主流的标准表示方法，用于真彩色和 JPEG 或者 TIFF 等图像文件格式里的通用颜色交换。由于 gamma 校正，256 级别不表示同等间隔的强度。_【2】

3.Gamma 校正 _【3】

伽马校正（Gamma correction）又叫 伽马非线性化（gamma nonlinearity）、伽马编码（gamma encoding）或是就只单纯叫伽马（gamma）。是用来针对影片或是影像系统里对于光线的辉度（luminance）或是三色刺激值（tristimulus values）所进行非线性的运算或反运算。最简单的例子，伽马校正是由下列幂定律公式所定义的：

$V_{out}=AV_{in}^{\gamma }$

其中 A 是一个常量，输入和输出的值都为非负实数值。一般地来说在 A=1 的通常情况下，输入输出的值的范围都是在 0 到 1 之间。伽马值 γ < 1 的情况有时被称作编码伽马值（encoding gamma），而执行这个编码运算所使用上述幂定律的过程也叫做 伽马压缩（gamma compression）；相对地，伽马值 γ > 1 的情况有时也被称作解码伽马值（decoding gamma），而执行这个解码运算所使用上述幂定律的过程也叫做 伽马展开（gamma expansion）。

参考：

1.Grayscale 2.三原色光模式 3.伽玛校正 4.opencv滤镜-图像灰度化 5.灰度、灰度级、分辨率、像素值 6.在学图像处理灰度值和像素值有什么区别一行的灰度值和这行上每个点的灰度值有什么关系？ 7.黑白照片是如何呈现的？305911你听说过吗？ 8.将RGB值转换为灰度值的简单算法 9.6种图片灰度转换算法 10.UNDERSTANDING GAMMA CORRECTION

richardmyu commented 3 years ago

二.灰度化方法

1.分量法

公式：

$\left\{\begin{matrix} &Gray1_{(i,j)} &=R_{(i,j)} \\ &Gray2_{(i,j)} &=G_{(i,j)} \\ &Gray3_{(i,j)} &=B_{(i,j)} \\\end{matrix}\right.$

效果图：

richardmyu commented 3 years ago

2.最大值法

$Gray_{(i,j)}=max(R_{(i,j)},G_{(i,j)},B_{(i,j)})$

效果图：

richardmyu commented 3 years ago

3.平均值法

$Gray_{(i,j)}=\frac{R_{(i,j)}+G_{(i,j)}+B_{(i,j)}}{3}$

效果图：

richardmyu commented 3 years ago

4.加权平均法

$Gray_{(i,j)}=aR_{(i,j)}+bG_{(i,j)}+cB_{(i,j)}$

效果图：

不同的RGB空间，灰阶的计算公式有所不同，常见的几种RGB空间的计算灰阶的公式如下：

简化 sRGB IEC61966-2.1 [gamma=2.20]

$Gray=(R^{2.2}*0.2126+G^{2.2}*0.7125+B^{2.2}*0.0722)^{1/2.2}$

Adobe RGB (1998) [gamma=2.20]

$Gray=(R^{2.2}*0.2973+G^{2.2}*0.6274+B^{2.2}*0.0753)^{1/2.2}$

Apple RGB [gamma=1.80]

$Gray=(R^{1.8}*0.2446+G^{1.8}*0.6720+B^{1.8}*0.0833)^{1/1.8}$

ColorMatch RGB [gamma=1.8]

$Gray=(R^{1.8}*0.2750+G^{1.8}*0.6581+B^{1.8}*0.0670)^{1/1.8}$

简化 KODAK DC Series Digital Camera [gamma=2.2]

$Gray=(R^{2.2}*0.2229+G^{2.2}*0.7175+B^{2.2}*0.0595)^{1/2.2}$

效果图：

richardmyu commented 3 years ago

5.自定义灰度阴影

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

// NumberOfShades 的范围在 [3, 256]
ConversionFactor = 255 / (NumberOfShades - 1)
AverageValue = (Red + Green + Blue) / 3
Gray = Math.round((AverageValue / ConversionFactor) + 0.5) * ConversionFactor

效果图：

NumberOfShades 设为 2 时，会得到一片空白；超过 256，效果等同 256。

richardmyu / blog