Javascript图像处理——亮度对比度 - Justany_WhiteSnow - 博客园
(变亮其实就等于R、G、B三个通道同时加大,那么变暗就等于同时减小。)
对比度变大其实就等于R、G、B三个通道同时乘以一个比例,因为这样相近的颜色之间的差距就变大了,那么减小就是同时除以一个比例。
线性模型实现比较简单,但是很容易就调出全白或者全黑的图片。
非线性模型公式:
当 Contrast >= 0 时:
newRGB = RGB + (RGB - Threshold) * (1 / (1 - Contrast / 255) - 1)
当 Contrast < 0 时:
newRGB = RGB + (RGB - Threshold) * Contrast / 255
Threshold 其实就是图片的灰度平均值。
document.getElementById('button_getImageData').addEventListener('click',function(){ data = ctx.getImageData(0, 0, canvas.width, canvas.height).data; }, false);
document.getElementById('range_contrast').addEventListener('change',function(e){ change_contrast(e); }, false);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data;
function avg_gray() {
var sum = 0;
for (var i = 0; i < data.length; i += 4) {
var gray = data[i] * 0.3 + data[i+1] * 0.59 + data[i+2] * 0.11;
sum += gray;
}
var avg = sum / (data.length / 4);
return avg;
}
function change_contrast(e) {
//var v = e.target.value / 70;
var v = (e.target.value - 50) *2;
var avg = avg_gray();
//msg.textContent = '对比度 X ' + v;
msg.textContent = '灰度平均值:' + avg + ',对比度:' + v;
var imgData1 = ctx.createImageData(canvas.width, canvas.height);
var data1 = imgData1.data;
for (var i = 0; i < data.length; i += 4) {
//线性
/*
data1[i] = data[i] * v;
data1[i + 1] = data[i + 1] * v;
data1[i + 2] = data[i + 2] * v;
data1[i + 3] = data[i + 3];
*/
//非线性
if (v >= 0) {
data1[i] = data[i] + (data[i] - avg) * (1 / (1 - v / 255) - 1);
data1[i + 1] = data[i + 1] + (data[i + 1] - avg) * (1 / (1 - v / 255) - 1);
data1[i + 2] = data[i + 2] + (data[i + 2] - avg) * (1 / (1 - v / 255) - 1);
data1[i + 3] = data[i + 3];
} else {
data1[i] = data[i] + (data[i] - avg) * v / 255;
data1[i + 1] = data[i + 1] + (data[i + 1] - avg) * v / 255;
data1[i + 2] = data[i + 2] + (data[i + 2] - avg) * v / 255;
data1[i + 3] = data[i + 3];
}
}
ctx.putImageData(imgData1, 0, 0);
}