javascript - 在 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 以呈现给用户即可。