有趣的6種圖片灰度轉換算法
【引自楊敬卓的博客】前言
黑白照片的時代雖然已經過去，但現在看到以前的照片，是不是有一種回到過去的感覺，很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指的是透明度。
舉個例子：本文720*480的水果圖片，一共有720 * 480 = 259200像素，每個像素又有4個數據，所以數據數組的總長度為259200 * 4 = 1036800。
可以看到圖片的數據很長，如果一次性處理很多圖片的時候，計算量相當可觀，所以例子中會使用worker，把繁重的計算任務交給后臺線程。
算法的基本步驟
- 取得每一個像素的red，green，blue值。
- 使用灰度算法，算出一個灰度值。
- 用這個灰度值代替像素原始的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” 是一個可選參數，用于模擬四舍五入。
小節
這是一篇很有趣的文章，不僅僅是介紹灰度算法，對了解圖片的處理過程也很有幫助。
