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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
vuex进阶知识点巩固
May 20 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
JavaScript自定义超时API代码实例
Apr 30 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 APC缓存配置、使用详解
2014/03/06 PHP
php调用C代码的实现方法
2014/03/11 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
微信小程序转发事件实现解析
2019/10/22 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
Python urllib.request对象案例解析
2020/05/11 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
人力资源管理毕业生自荐信
2013/11/21 职场文书
后勤采购员岗位职责
2013/12/19 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
Redis IP地址的绑定的实现
2021/05/08 Redis
浅谈PHP7中的一些小技巧
2021/05/29 PHP
Python实现滑雪小游戏
2021/09/25 Python