模型亮度Javascript图像处理——亮度对比度

文章结束给大家来个程序员笑话：[M]

    

言前

    上一篇文章，我们讲解了图像理处中的积卷作操和平滑（也就是糊模）理处，这篇文章我们停止亮度和对比度的化变。

 

    

其实，亮度是啥玩意？

    亮度就是较比亮眼咯……

    

    实际上对于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

文章结束给大家分享下程序员的一些笑话语录： 那是习惯决定的，一直保持一个习惯是不好的！IE6的用户不习惯多标签，但是最终肯定还是得转到多标签的浏览器。历史（软件UI）的进步（改善）不是以个人意志（习惯）为转移的！