在Photoshop中实现功能“级别”

Question

面对这样的问题。需要实现修正级别的功能，如在Photoshop中：

问题在于：图像的每个像素都有数据，用户输入的数据是InputWhite，InputBlack，OutputWhite，OutputBlack。 （如图所示）。

我需要专门针对每个像素（RGB）更改每个3个通道。

我怎样才能改变他们的？我不明白。提前谢谢。

Answer 1

您可以使用画布的imageData来修改单个像素的RGB值。

例如，“增加”所有像素的绿色“通道”，你可以做到这一点，每个像素的RGB中每个G的值增加30：

var imageData = ctx.getImageData(0,0,can.width, can.height);
var pixels = imageData.data;
var numPixels = pixels.length;

ctx.clearRect(0, 0, can.width, can.height);

for (var i = 0; i < numPixels; i++) {
    var average = (pixels[i*4] + pixels[i*4+1] + pixels[i*4+2]) /3;
    // set red green and blue pixels to the average value
    pixels[i*4] = 0;
    pixels[i*4+1] += 30;
    pixels[i*4+2] += 0;
}
ctx.putImageData(imageData, 0, 0);

示例：

http://jsfiddle.net/YxYuF/

从那里开始，只需要向用户提供一个漂亮的UI。