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表示亮度系數。

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

所以，實際上在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;
};

 

效果

 

系列目錄

Javascript圖像處理系列

 

參考資料

Changing the contrast and brightness of an image!

Photoshop圖像亮度/對比度調整 . 阿發伯 . 2011-12-13