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


Posted in Javascript onJanuary 03, 2013

前言

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

其实,亮度是啥玩意?

亮度就是比较亮眼咯……

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; 
};

效果

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

Javascript 相关文章推荐
JS 时间显示效果代码
Aug 23 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 #Javascript
javascript学习(一)构建自己的JS库
Jan 02 #Javascript
jQuery常见开发技巧详细整理
Jan 02 #Javascript
js显示时间 js显示最后修改时间
Jan 02 #Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 #Javascript
js 回车提交表单两种实现方法
Dec 31 #Javascript
event.currentTarget与event.target的区别介绍
Dec 31 #Javascript
You might like
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
基于jquery 的一个progressbar widge
2010/10/29 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
js单例模式详解实例
2013/11/21 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python 布尔操作实现代码
2013/03/23 Python
python进阶教程之动态类型详解
2014/08/30 Python
用python制作游戏外挂
2018/01/04 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
python -v 报错问题的解决方法
2020/09/15 Python
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
中学家长会邀请函
2014/02/03 职场文书
测试工程师职业规划书
2014/02/06 职场文书
中秋手机店促销方案
2014/06/16 职场文书
高中学校对照检查材料
2014/08/31 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
再谈python_tkinter弹出对话框创建
2022/03/20 Python