HTML5 Canvas 图像对比

Question

我一直在编写一个图像处理程序，它通过 HTML5 Canvas 像素处理应用效果。我已经实现了 Thresholding、Vintaging 和 ColorGradient 像素操作，但令人难以置信的是，我无法改变图像的对比度!
我尝试了多种解决方案，但我总是在图片中获得过多的亮度，而对比效果却较少而且我不打算使用任何 Javascript 库，因为我试图在本地实现这些效果。

基本像素操作代码:

var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
 //Note: data[i], data[i+1], data[i+2] represent RGB respectively
data[i] = data[i];
data[i+1] = data[i+1];
data[i+2] = data[i+2];
}

像素操作示例

值处于 RGB 模式，这意味着 data[i] 是红色。所以如果 data[i] = data[i] * 2;该像素的红色 channel 的亮度将增加到两倍。例子:

var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
 //Note: data[i], data[i+1], data[i+2] represent RGB respectively
 //Increases brightness of RGB channel by 2
data[i] = data[i]*2;
data[i+1] = data[i+1]*2;
data[i+2] = data[i+2]*2;
}

* 注意:我不是要求你们完成代码!那只是一个忙!我要求一种算法(甚至是伪代码)来显示像素操作中的对比度是如何可能的!
如果有人可以为 HTML5 Canvas 中的图像对比度提供一个好的算法，我会很高兴。

Answer 1

这个 javascript 实现符合“对比度”的 SVG/CSS3 定义(以下代码将相同地呈现您的 Canvas 图像):

/*contrast filter function*/
//See definition at https://drafts.fxtf.org/filters/#contrastEquivalent
//pixels come from your getImageData() function call on your canvas image
contrast = function(pixels, value){
    var d = pixels.data;
    var intercept = 255*(-value/2 + 0.5);
    for(var i=0;i<d.length;i+=4){
        d[i] = d[i]*value + intercept;
        d[i+1] = d[i+1]*value + intercept;
        d[i+2] = d[i+2]*value + intercept;
        //implement clamping in a separate function if using in production
        if(d[i] > 255) d[i] = 255;
        if(d[i+1] > 255) d[i+1] = 255;
        if(d[i+2] > 255) d[i+2] = 255;
        if(d[i] < 0) d[i] = 0;
        if(d[i+1] < 0) d[i+1] = 0;
        if(d[i+2] < 0) d[i+2] = 0;
    }
    return pixels;
}