作家
登录

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

作者: 来源:www.28hudong.com 2013-03-30 00:15:21 阅读 我要评论

前言 上一篇文章,我们讲解了图像处理中的卷积操作和平滑(也就是模糊)处理,这篇文章我们进行亮度和对比度的变化。 其实,亮度是啥玩意? 亮度就是比较亮眼咯…… 实际上对于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表示亮度系数。 线性模型实现比较简单,但是很容易就调出全白或者全黑的图片,对于普通用户来说Contrast、Brightness选多少比较好也比较难确定。 所以,实际上在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; };效果

  推荐阅读

  jQuery.validate 常用方法及需要注意的问题

1.用其他方式替代默认的SUBMIT复制代码 代码如下:$().ready(function() { $("#signupForm").validate({ submitHandler:function(form){ alert("submitted"); form.submit(); >>>详细阅读


本文标题:Javascript图像处理—亮度对比度应用案例

地址:http://www.17bianji.com/kaifa2/JS/22651.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)