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 相关文章推荐
javascript之bind使用介绍
Oct 09 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
JS中操作JSON总结
Dec 06 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
封装好的省市地区联动控件附下载
2007/08/13 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
python图像处理入门(一)
2019/04/04 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
python同时遍历两个list用法说明
2020/05/02 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
python PIL模块的基本使用
2020/09/29 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
英国门把手公司:Door Handle Company
2019/05/12 全球购物
办公室助理岗位职责
2013/12/25 职场文书
会计自我鉴定
2014/02/04 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
明确岗位职责
2015/02/14 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
教师研修随笔感言
2015/11/18 职场文书
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL