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

系统 3017 0

前言

上一篇文章 ,我们讲解了图像处理中的卷积操作和平滑(也就是模糊)处理,这篇文章我们进行亮度和对比度的变化。

 

其实,亮度是啥玩意?

亮度就是比较亮眼咯……

Javascript图像处理——亮度对比度_第1张图片

实际上对于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图像处理——亮度对比度_第2张图片

 

系列目录

Javascript图像处理系列

 

参考资料

Changing the contrast and brightness of an image!

Photoshop图像亮度/对比度调整 . 阿发伯 .  2011-12-13

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


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论