Javascript图像处理—亮度对比度应用案例

 更新时间:2013年01月03日 08:40:42   作者:  
上一篇文章,我们讲解了图像处理中的卷积操作和平滑(也就是模糊)处理,这篇文章我们进行亮度和对比度的变化,有需要的朋友可以参考下

前言

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

其实,亮度是啥玩意?

亮度就是比较亮眼咯……

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

效果

相关文章

  • 浅谈javascript的调试

    浅谈javascript的调试

    本文主要向大家讲述了使用javascript进行调试的方法的过程,推荐给小伙伴们参考下。
    2015-01-01
  • 深入理解JavaScript中的箭头函数

    深入理解JavaScript中的箭头函数

    这篇文章主要介绍了深入理解JavaScript中的箭头函数,文中主要针对ES6版本的JS进行相关的讲解,需要的朋友可以参考下
    2015-07-07
  • 2019年度web前端面试题总结(主要为Vue面试题)

    2019年度web前端面试题总结(主要为Vue面试题)

    转眼2019又要过去了,作为一名前端码农,又熬过一个没日没夜的年头,头发又少了不少,去年的学习计划一半也没完成,唉。。。 现在为大家总结一下这一年面试的几家公司的关于前端面试题吧
    2020-01-01
  • 详解JavaScript的变量

    详解JavaScript的变量

    这篇文章主要介绍了JavaScript变量,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 在JavaScript中使用NaN值的方法

    在JavaScript中使用NaN值的方法

    这篇文章主要介绍了在JavaScript中使用NaN值的方法,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • 基于js 字符串indexof与search方法的区别(详解)

    基于js 字符串indexof与search方法的区别(详解)

    下面小编就为大家分享一篇基于js 字符串indexof与search方法的区别介绍,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • JavaScript CSS修改学习第五章 给“上传”添加样式

    JavaScript CSS修改学习第五章 给“上传”添加样式

    在所有的表单项里面,文件上传部分是最难添加样式的。IE支持一些(不是很多)样式属性,Mozilla很少,其他浏览器几乎没有。“浏览”按钮在CSS操作里面也很难访问。
    2010-02-02
  • 浅析js绑定事件的常用方法

    浅析js绑定事件的常用方法

    下面小编就为大家带来一篇浅析js绑定事件的常用方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • javascript的内存管理详解

    javascript的内存管理详解

    这篇文章介绍了javascript的内存管理详解,有需要的朋友可以参考一下
    2013-08-08
  • onkeyup,onkeydown和onkeypress的区别介绍

    onkeyup,onkeydown和onkeypress的区别介绍

    三者在事件的响应上还有一点不同,就是onkeydown 、onkeypress事件响应的时候输入的字符并没有被系统接受,而响应onkeyup的时候,输入流已经被系统接受
    2013-10-10

最新评论