Javascript圖像處理—亮度對(duì)比度應(yīng)用案例

更新時(shí)間：2013年01月03日 08:40:42 作者：

上一篇文章，我們講解了圖像處理中的卷積操作和平滑（也就是模糊）處理，這篇文章我們進(jìn)行亮度和對(duì)比度的變化,有需要的朋友可以參考下

前言

上一篇文章，我們講解了圖像處理中的卷積操作和平滑（也就是模糊）處理，這篇文章我們進(jìn)行亮度和對(duì)比度的變化。

其實(shí)，亮度是啥玩意？

亮度就是比較亮眼咯……

實(shí)際上對(duì)于RGBA顏色空間，變亮其實(shí)就等于R、G、B三個(gè)通道同時(shí)加大，那么變暗就等于同時(shí)減小咯。

這比較好理解，因?yàn)樽畎档暮谏荝GB(0,0,0)，而最亮的白色是RGB(255,255,255)。所以變亮應(yīng)該RGB各通道都要增大。

那么，對(duì)比度呢？

對(duì)比度，其實(shí)就是顏色差啦。

那么對(duì)于RGBA顏色空間，對(duì)比度變大其實(shí)就等于R、G、B三個(gè)通道同時(shí)乘以一個(gè)比例，因?yàn)檫@樣相近的顏色之間的差距就變大了，那么減小就是同時(shí)除以咯。

舉個(gè)例子，原來(lái)RGB(23,44,55)和RGB(33,44,55)相差只有10，但是一起乘以2以后，就變成了RGB(46,88,110)和RGB(66,88,110)

，相差變成了20了，也就是“顏色差”變大了。

線性模型

newRGB = Contrast * RGB + Brightness

線性模型滿足上述公式，其中 Contrast表示對(duì)比度系數(shù)，Brightness表示亮度系數(shù)。

線性模型實(shí)現(xiàn)比較簡(jiǎn)單，但是很容易就調(diào)出全白或者全黑的圖片，對(duì)于普通用戶來(lái)說(shuō)Contrast、Brightness選多少比較好也比較難確定。

所以，實(shí)際上在Photoshop里面使用的并不是線性模型，而是非線性模型。

非線性模型

非線性模型中對(duì)比度增大和閾值Threshold有關(guān)：

當(dāng)Contrast >= 0時(shí)：

newRGB = RGB + (RGB - Threshold) * (1 / (1 - Contrast / 255) - 1)

當(dāng)Contrast < 0時(shí)：

newRGB = RGB + (RGB - Threshold) * Contrast / 255

那么當(dāng)對(duì)比度和亮度同時(shí)調(diào)整時(shí)候呢？

如果對(duì)比度大于0，先調(diào)整亮度，再調(diào)整對(duì)比度；當(dāng)對(duì)比度小于0時(shí)，則相反，先調(diào)整對(duì)比度，再調(diào)整亮度。

最后一個(gè)問題，閾值Threshold到底是什么，其實(shí)這個(gè)是圖片的灰度平均值。

實(shí)現(xiàn)代碼

復(fù)制代碼代碼如下:

var brightnessContrast = function(__src, __brightness, __contrast){ 
__src || error(arguments.callee, IS_UNDEFINED_OR_NULL/* {line} */); 
if(__src.type === "CV_RGBA"){ 
var sData = __src.data, 
width = __src.col, 
height = __src.row, 
dst = new Mat(height, width, CV_RGBA), 
dData = dst.data, 
brightness = Math.max(-255, Math.min(255, __brightness || 0)), 
contrast = Math.max(-255, Math.min(255, __contrast || 0)); 

var gray = cvtColor(__src, CV_RGBA2GRAY), 
allValue = 0, 
gData = gray.data; 
var y, x, c; 

for(y = height; y--;){ 
for(x = width; x--;){ 
allValue += gData[y * width + x]; 
} 
} 

var r, g, b, offset, gAverage = (allValue / (height * width)) | 0; 

for(y = height; y--;){ 
for(x = width; x--;){ 
offset = (y * width + x) * 4; 
dData[offset] = sData[offset] + brightness; 
dData[offset + 1] = sData[offset + 1] + brightness; 
dData[offset + 2] = sData[offset + 2] + brightness; 

if(contrast >= 0){ 
for(c = 3; c--;){ 
if(dData[offset + c] >= gAverage){ 
dData[offset + c] = dData[offset + c] + (255 - gAverage) * contrast / 255; 
}else{ 
dData[offset + c] = dData[offset + c] - (gAverage * contrast / 255); 
} 
} 
}else{ 
dData[offset] = dData[offset] + (dData[offset] - gAverage) * contrast / 255; 
dData[offset + 1] = dData[offset + 1] + (dData[offset + 1] - gAverage) * contrast / 255; 
dData[offset + 2] = dData[offset + 2] + (dData[offset + 2] - gAverage) * contrast / 255; 
} 

dData[offset + 3] = 255; 
} 
} 
}else{ 
error(arguments.callee, UNSPPORT_DATA_TYPE/* {line} */); 
} 
return dst; 
};