【引自楊敬卓的博客】前言

黑白照片的時(shí)代雖然已經(jīng)過(guò)去，但現(xiàn)在看到以前的照片，是不是有一種回到過(guò)去的感覺(jué)，很cool有木有~

看完這篇文章，就可以把彩色照片變成各種各樣的黑白的照片啦。

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

例子的源碼位于blog/demo里

三原色與灰度

原色是指不能透過(guò)其他顏色的混合調(diào)配而得出的“基本色”。一般來(lái)說(shuō)疊加型的三原色是紅色、綠色、藍(lán)色，以不同比例將原色混合，可以產(chǎn)生出其他的新顏色。這套原色系統(tǒng)常被稱為“RGB色彩空間”，亦即由紅(R)綠(G)藍(lán)(B)所組合出的色彩系統(tǒng)。

當(dāng)這三種原色以等比例疊加在一起時(shí)，會(huì)變成灰色;若將此三原色的強(qiáng)度均調(diào)至***并且等量重疊時(shí)，則會(huì)呈現(xiàn)白色。灰度就是沒(méi)有色彩，RGB色彩分量全部相等。

獲取圖片的像素?cái)?shù)據(jù)

算法不區(qū)分語(yǔ)言，這里以前端舉例?？梢允褂胏anvas取得圖片某個(gè)區(qū)域的像素?cái)?shù)據(jù)

//偽代碼 
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); 
//圖片的像素?cái)?shù)據(jù) 
var data = canvasCtx.getImageData(0, 0, img.width, img.height);  

使用getImageData()返回一個(gè)ImageData對(duì)象，此對(duì)象有個(gè)data屬性就是我們要的數(shù)據(jù)了，數(shù)據(jù)是以Uint8ClampedArray 描述的一個(gè)一維數(shù)組，包含以 RGBA 順序的數(shù)據(jù)，數(shù)據(jù)使用 0 至 255(包含)的整數(shù)表示。 所以，一個(gè)像素會(huì)有4個(gè)數(shù)據(jù)(RGBA),RGB是紅綠藍(lán)，A指的是透明度。

舉個(gè)例子：本文720*480的水果圖片，一共有720 * 480 = 259200像素，每個(gè)像素又有4個(gè)數(shù)據(jù)，所以數(shù)據(jù)數(shù)組的總長(zhǎng)度為259200 * 4 = 1036800。

可以看到圖片的數(shù)據(jù)很長(zhǎng)，如果一次性處理很多圖片的時(shí)候，計(jì)算量相當(dāng)可觀，所以例子中會(huì)使用worker，把繁重的計(jì)算任務(wù)交給后臺(tái)線程。

算法的基本步驟

1. 取得每一個(gè)像素的red，green，blue值。
2. 使用灰度算法，算出一個(gè)灰度值。
3. 用這個(gè)灰度值代替像素原始的red，green，blue值。

比如我們的灰度算法是：

Gray = (Red + Green + Blue) / 3 

計(jì)算過(guò)程：

//偽代碼 
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 
}  

很簡(jiǎn)單對(duì)吧。

很多好吃的鮮艷水果，但是它們馬上要變灰了!!   

 

算法1 - 平均法

使用算法1：   

 

這是最常見(jiàn)的灰度算法，簡(jiǎn)單暴力，把它放到***位。公式是：

Gray = (Red + Green + Blue) / 3 

這個(gè)算法可以生成不錯(cuò)灰度值，因?yàn)楣胶?jiǎn)單，所以易于維護(hù)和優(yōu)化。然而它也不是沒(méi)有缺點(diǎn)，因?yàn)楹?jiǎn)單快速，從人眼的感知角度看，圖片的灰度陰影和亮度方面做的還不夠好。所以，我們需要更復(fù)雜的運(yùn)算。

算法2 - 基于人眼感知

使用算法2：   

 

算法1與算法2生成的圖片似乎沒(méi)太大差別，所以增加一個(gè)例子，將圖片上半部分用算法1，下半部分用算法2。

上半部分是算法1，下半部分是算法2：   

 

仔細(xì)看的話，中間有一根黑線。上半部分(算法1)比下半部分(算法2)更蒼白一些。如果還是看不出來(lái)，注意最右邊的檸檬，算法1的檸檬反光更強(qiáng)烈，算法2的檸檬更柔和。

第二種算法考慮到了人眼對(duì)不同光感知程度不同。人的眼睛內(nèi)有幾種辨別顏色的錐形感光細(xì)胞，分別對(duì)黃綠色、綠色和藍(lán)紫色的光最敏感。雖然眼球中的椎狀細(xì)胞并非對(duì)紅、綠、藍(lán)三色的感受度***，但是由肉眼的椎狀細(xì)胞所能感受的光的帶寬很大，紅、綠、藍(lán)也能夠獨(dú)立刺激這三種顏色的受光體。

人類對(duì)紅綠藍(lán)三色的感知程度依次是： 綠>紅>藍(lán)，所以平均算法從這個(gè)角度看是不科學(xué)的。應(yīng)該按照人類對(duì)光的感知程度為每個(gè)顏色設(shè)定一個(gè)權(quán)重，它們的之間的地位不應(yīng)該是平等的。

一個(gè)圖像處理通用的公式是：

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

可以看到，每個(gè)顏色的系數(shù)相差很大。

現(xiàn)在對(duì)圖像灰度處理的***公式還存在爭(zhēng)議，有一些類似的公式：

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

or 

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

它們只是在系數(shù)上存在一些偏差，大體的比值差不多。

算法3 - 去飽和

使用算法3：   

 

在說(shuō)這個(gè)算法之前，先說(shuō)說(shuō)RGB，大多數(shù)程序員都使用RGB模型，每一種顏色都可以由紅綠藍(lán)組成，RGB對(duì)計(jì)算機(jī)來(lái)說(shuō)可以很好的描述顏色，但對(duì)于人類而言就很難理解了。如果升國(guó)旗的時(shí)候說(shuō)，“五星紅旗多么RGB(255, 0, 42)”，可能會(huì)被暴打一頓。但我說(shuō)鮮紅的五星紅旗，老師可能會(huì)點(diǎn)頭稱贊。

所以為了更通俗易懂，有時(shí)我們選擇HLS模型描述顏色，這三個(gè)字母分別表示Hue(色調(diào))、Saturation(飽和度)、Lightness(亮度)。色調(diào)，取值為：0 - 360，0(或360)表示紅色，120表示綠色，240表示藍(lán)色，也可取其他數(shù)值來(lái)指定顏色。飽和度，取值為：0.0% - 100.0%，它通常指顏色的鮮艷程度。亮度，取值為：0.0% - 100.0%，黑色的亮度為0。

去飽和的過(guò)程就是把RGB轉(zhuǎn)換為HLS，然后將飽和度設(shè)為0。因此，我們需要取一種顏色，轉(zhuǎn)換它為最不飽和的值。這個(gè)數(shù)學(xué)公式比本文介紹的更復(fù)雜，這里提供一個(gè)簡(jiǎn)單的公式，一個(gè)像素可以被去飽和通過(guò)計(jì)算RGB中的***值和最小值的中間值：

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

去飽和后，圖片立體感減弱，但是更柔和。對(duì)比算法2，可以很明顯的看出差異，從效果上看，可能大多數(shù)人都喜歡算法2，算法3是目前為止，處理的圖片立體感最弱，最黑暗的。

算法4 - 分解

取***值  

 

取最小值   

 

分解算法可以認(rèn)為是去飽和更簡(jiǎn)單一種的方式。分解是基于每一個(gè)像素的，只取RGB的***值或者最小值。

***值分解：

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

最小值分解：

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

正如上面展現(xiàn)的，***值分解提供了更明亮的圖，而最小值分解提供了更黑暗的圖。

算法5 - 單一通道

取紅色通道  

 

取綠色通道   

 

取藍(lán)色通道  

 

圖片變灰更快捷的方法，這個(gè)方法不用做任何計(jì)算，取一個(gè)通道的值直接作為灰度值。

Gray = Red 

or

Gray = Green 

or

Gray = Blue 

不管相不相信，大多數(shù)數(shù)碼相機(jī)都用這個(gè)算法生成灰度圖片。很難預(yù)測(cè)這種轉(zhuǎn)換的結(jié)果，所以這種算法多用于藝術(shù)效果。

算法6 - 自定義灰度陰影

NumberOfShades = 4    

 

這是到目前為止最有趣的算法，允許用戶提供一個(gè)灰色陰影值，值的范圍在2-256。2的結(jié)果是一張全白的圖片，256的結(jié)果和算法1一樣。

NumberOfShades = 16   

 

該算法通過(guò)選擇陰影值來(lái)工作，它的公式有點(diǎn)復(fù)雜

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

• NumberOfShades 的范圍在2-256。
• 從技術(shù)上說(shuō)，任何灰度算法都可以計(jì)算AverageValue，它僅僅提供一個(gè)初始灰度的估計(jì)值。
• “+ 0.5” 是一個(gè)可選參數(shù)，用于模擬四舍五入。

小節(jié)

這是一篇很有趣的文章，不僅僅是介紹灰度算法，對(duì)了解圖片的處理過(guò)程也很有幫助。