图片对比度算法

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