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 new fun的执行过程
Aug 05 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 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
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
如何在python中使用selenium的示例
2017/12/26 Python
django如何连接已存在数据的数据库
2018/08/14 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
python正则表达式实例代码
2020/03/03 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
销售业务实习自我鉴定
2013/09/23 职场文书
管理专员自荐信
2014/01/26 职场文书
学校花圃的标语
2014/06/18 职场文书
医德医魂心得体会
2014/09/11 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
会计工作总结范文2014
2014/12/23 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书