DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> Javascript圖像處理—亮度對比度應用案例
Javascript圖像處理—亮度對比度應用案例
編輯:JavaScript基礎知識     

前言

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

其實,亮度是啥玩意?

亮度就是比較亮眼咯……

實際上對於RGBA顏色空間,變亮其實就等於R、G、B三個通道同時加大,那麼變暗就等於同時減小咯。

這比較好理解,因為最暗的黑色是RGB(0,0,0),而最亮的白色是RGB(255,255,255)。所以變亮應該RGB各通道都要增大。

那麼,對比度呢?

對比度,其實就是顏色差啦。

那麼對於RGBA顏色空間,對比度變大其實就等於R、G、B三個通道同時乘以一個比例,因為這樣相近的顏色之間的差距就變大了,那麼減小就是同時除以咯。

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

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

線性模型

newRGB =  Contrast * RGB + Brightness

線性模型滿足上述公式,其中 Contrast表示對比度系數,Brightness表示亮度系數。

線性模型實現比較簡單,但是很容易就調出全白或者全黑的圖片,對於普通用戶來說ContrastBrightness選多少比較好也比較難確定。

所以,實際上在Photoshop裡面使用的並不是線性模型,而是非線性模型。

非線性模型

非線性模型中對比度增大和阈值Threshold有關:

當Contrast >= 0時:

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

當Contrast < 0時:

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

那麼當對比度和亮度同時調整時候呢?

如果對比度大於0,先調整亮度,再調整對比度;當對比度小於0時,則相反,先調整對比度,再調整亮度。

最後一個問題,阈值Threshold到底是什麼,其實這個是圖片的灰度平均值。

實現代碼
復制代碼 代碼如下:
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;
};

效果

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved