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表示亮度系数。

线性模型实现比较简单，但是很容易就调出全白或者全黑的图片，对于普通用户来说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; 
};

效果