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;
};

效果

时间: 2024-09-14 11:29:57

Javascript图像处理—亮度对比度应用案例_基础知识的相关文章

Javascript中的数据类型之旅_基础知识

虽然Javascript是弱类型语言,但是,它也有自己的几种数据类型,分别是:Number.String.Boolean.Object.Udefined.Null.其中,Object属于复杂数据类型,Object   由无序的键值对组成.其余几种都属于简单数据类型.注意:变量类型首字母大写,而变量值首字母是小写的. JavaScript不支持自定义类型,所以JavaScript中的所有值都属于这六种类型之一. 根据ECMAScript 5.1的规范,javascript中共有六种数据类型,分别为

JavaScript 表单处理实现代码_基础知识

一 表单介绍 在HTML中,表单是由<form>元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型; // HTMLFormElement继承了HTMLElement;因此它拥有HTML元素具有的默认属性,别且还独有自己的属性和方法;HTMLFormElement属性和方法属性或方法 说明 acceptCharset 服务器能够处理的字符集; action 接受请求的URL; elements 表单中所有控件的集合; enctype 请求的编码类型; l

JavaScript DOM操作表格及样式_基础知识

一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.createElement('caption'); table.appendChild(caption); caption.appe

javascript中var的重要性分析_基础知识

本文实例分析了javascript中var的重要性.分享给大家供大家参考.具体分析如下: javascript 的 var 作用是声明变量. 一般情况下不写都不会出错,但有些情况如果不写,会有不同的结果.先看下面的示例: <div id="a"></div> <script type="text/javascript"> a = 1; alert(a); </script> 上面这个例子在FF Chrome执行不会有问

简介JavaScript中toTimeString()方法的使用_基础知识

 该方法返回一个Date对象在人类可读的形式时间部分.语法 Date.toTimeString() 下面是参数的详细信息:     NA 返回值: 返回Date对象的人类可读形式的时间部分.例子: <html> <head> <title>JavaScript toTimeString Method</title> </head> <body> <script type="text/javascript"&g

简述JavaScript中正则表达式的使用方法_基础知识

 正则表达式是一个对象,它描述了字符模式. JavaScript的RegExp类表示正则表达式和字符串和正则表达式定义,使用正则表达式来进行强大的模式匹配和搜索和替换文本功能的方法.语法: 正则表达式可以用RegExp( ) 构造这样的定义: var pattern = new RegExp(pattern, attributes); or simply var pattern = /pattern/attributes; 这里是参数的说明:     pattern: 一个字符串,指定正则表达式

javascript的 {} 语句块详解_基础知识

今日学习解析json字符串,用到了一个eval()方法,解析字符串的时候为什么需要加上括号呢?摸不着头脑.原来javascript中{}语句块具有二义性,不加括号会出错,理解这种二义性对我们理解javascript代码有极大帮助. 一.{}语句块的两个含义 表示语句块 a. 在javascript中可以使用{}来括起代码,在编辑器中方便管理代码.因为javascript并没有块级作用域,所以这种写法是无害的. { //some code... } b. 在javascript中 ,条件判断语句,

JavaScript函数使用的基本教程_基础知识

 函数是一组可重用的代码,可以在程序的任何地方被调用.这消除了一次又一次地写入相同的代码的需要.这将帮助程序员编写模块化代码.您可以在一些小且易于管理的功能划分大程序. 像任何其他高级编程语言,JavaScript支持所有必要写模块化的代码使用函数的特点. 一定见过这样 alert() 和write()在前面的章节功能.我们一次又一次地使用这些功能,但它们已经写在核心JavaScript只有一次. JavaScript允许我们写自己的函数,以及本节将介绍如何编写自己的函数在JavaScript.

简介JavaScript中valueOf()方法的使用_基础知识

 JavaScript的Boolean.valueOf()方法返回指定 Boolean对象的原始值.语法 boolean.valueOf() 下面是参数的详细信息:     NA 返回值: 返回指定Boolean对象的原始值.例子: <html> <head> <title>JavaScript valueOf() Method</title> </head> <body> <script type="text/jav