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模拟实现Array的sort方法
Dec 11 Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
webpack实用小功能介绍
Jan 02 Javascript
vue-cli的工程模板与构建工具详解
Sep 27 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
php操作xml
2013/10/27 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
读jQuery之八 包装事件对象
2011/06/21 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
Python生成随机验证码的两种方法
2015/12/22 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
Django ModelForm操作及验证方式
2020/03/30 Python
Python xlwt模块使用代码实例
2020/06/10 Python
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
毕业生医学检验求职信
2013/10/16 职场文书
建筑人员岗位职责
2013/12/25 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
岗位竞聘书范文
2014/03/31 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
信访稳定工作汇报
2014/10/27 职场文书
先进个人总结范文
2015/02/15 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书