有趣的6種圖片灰度轉換算法

本文轉載自blog

轉載請註明出處

前言

黑白照片的時代雖然已通過去，但如今看到之前的照片，是否是有一種回到過去的感受，很cool有木有~
看完這篇文章，就能夠把彩色照片變成各類各樣的黑白的照片啦。

本文完整的在線例子圖片灰度算法例子，例子的圖片有點多，可能有些慢。

例子的源碼位於blog/demo裏

三原色與灰度

原色是指不能透過其餘顏色的混合調配而得出的「基本色」。通常來講疊加型的三原色是紅色、綠色、藍色，以不一樣比例將原色混合，能夠產生出其餘的新顏色。這套原色系統常被稱爲「RGB色彩空間」，亦即由紅（R）綠（G）藍（B）所組合出的色彩系統。

當這三種原色以等比例疊加在一塊兒時，會變成灰色；若將此三原色的強度均調至最大而且等量重疊時，則會呈現白色。灰度就是沒有色彩，RGB色彩份量所有相等。

獲取圖片的像素數據

算法不區分語言，這裏之前端舉例。可使用canvas取得圖片某個區域的像素數據

//僞代碼
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對象，此對象有個data屬性就是咱們要的數據了，數據是以Uint8ClampedArray 描述的一個一維數組，包含以 RGBA 順序的數據，數據使用 0 至 255（包含）的整數表示。 因此，一個像素會有4個數據（RGBA）,RGB是紅綠藍，A指的是透明度。

舉個例子：本文720480的水果圖片，一共有720 480 = 259200像素，每一個像素又有4個數據，因此數據數組的總長度爲259200 * 4 = 1036800。

能夠看到圖片的數據很長，若是一次性處理不少圖片的時候，計算量至關可觀，因此例子中會使用worker，把繁重的計算任務交給後臺線程。

算法的基本步驟

1. 取得每個像素的red，green，blue值。

2. 使用灰度算法，算出一個灰度值。

3. 用這個灰度值代替像素原始的red，green，blue值。

好比咱們的灰度算法是：

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
}

很簡單對吧。

不少好吃的鮮豔水果，可是它們立刻要變灰了！！

算法1 - 平均法

使用算法1：

這是最多見的灰度算法，簡單暴力，把它放到第一位。公式是：

Gray = (Red + Green + Blue) / 3

這個算法能夠生成不錯灰度值，由於公式簡單，因此易於維護和優化。然而它也不是沒有缺點，由於簡單快速，從人眼的感知角度看，圖片的灰度陰影和亮度方面作的還不夠好。因此，咱們須要更復雜的運算。

算法2 - 基於人眼感知

使用算法2：

算法1與算法2生成的圖片彷佛沒太大差異，因此增長一個例子，將圖片上半部分用算法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)

or

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

它們只是在係數上存在一些誤差，大致的比值差很少。

算法3 - 去飽和

使用算法3：

在說這個算法以前，先說說RGB，大多數程序員都使用RGB模型，每一種顏色均可以由紅綠藍組成，RGB對計算機來講能夠很好的描述顏色，但對於人類而言就很難理解了。若是升國旗的時候說，「五星紅旗多麼RGB(255, 0, 42)」，可能會被暴打一頓。但我說鮮紅的五星紅旗，老師可能會點頭稱讚。

因此爲了更通俗易懂，有時咱們選擇HLS模型描述顏色，這三個字母分別表示Hue(色調)、Saturation(飽和度)、Lightness(亮度)。色調，取值爲：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是目前爲止，處理的圖片立體感最弱，最黑暗的。

算法4 - 分解

取最大值

取最小值

分解算法能夠認爲是去飽和更簡單一種的方式。分解是基於每個像素的，只取RGB的最大值或者最小值。

最大值分解：

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

最小值分解：

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

正如上面展示的，最大值分解提供了更明亮的圖，而最小值分解提供了更黑暗的圖。

算法5 - 單一通道

取紅色通道

取綠色通道

取藍色通道

圖片變灰更快捷的方法，這個方法不用作任何計算，取一個通道的值直接做爲灰度值。

Gray = Red

or

Gray = Green

or

Gray = Blue

無論相不相信，大多數數碼相機都用這個算法生成灰度圖片。很難預測這種轉換的結果，因此這種算法多用於藝術效果。

算法6 - 自定義灰度陰影

NumberOfShades = 4

這是到目前爲止最有趣的算法，容許用戶提供一個灰色陰影值，值的範圍在2-256。2的結果是一張全白的圖片，256的結果和算法1同樣。

NumberOfShades = 16

該算法經過選擇陰影值來工做，它的公式有點複雜

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

• NumberOfShades 的範圍在2-256。

• 從技術上說，任何灰度算法均可以計算AverageValue，它僅僅提供一個初始灰度的估計值。

• 「+ 0.5」 是一個可選參數，用於模擬四捨五入。

小節

這是一篇頗有趣的文章，不只僅是介紹灰度算法，對了解圖片的處理過程也頗有幫助。

References

• Seven grayscale conversion algorithms (with pseudocode and VB6 source code)