颜色总和为黑色答案

【问题标题】：Colors Summing to Black颜色总和为黑色
【发布时间】：2014-02-25 10:22:19
【问题描述】：

我正在利用以下选定答案中的一些代码：

How to change color of an image using jquery

它工作得很好，但是当我多次运行代码时，似乎新颜色被添加到旧颜色中，所以最终一切都变黑了。我认为我的问题不是真正理解这件作品发生了什么：

for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
{
    // If it's not a transparent pixel
    if(currentPixels.data[I + 3] > 0)
    {
        currentPixels.data[I]     = originalPixels.data[I] / 255 * newColor.R;
        currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
        currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
    }
}

我知道我正在遍历画布上的所有像素并修改不透明的像素，但是像素数据 / 255 * 新的红色、绿色或蓝色是什么？

【问题讨论】：

这看起来像currentPixels === originalPixels。记住 JavaScript 通过引用获取 Objects；您需要创建一个克隆，并将其存储为originalPixels。

标签： javascript canvas

【解决方案1】：

您需要将源图像数据与目标数据分开，以便每次运行循环时源数据始终与原始数据相同。

您可以为此使用两个画布（如果您愿意，可以在屏幕外）将原始图像绘制到一个（源）中，然后在另一个中呈现结果。

您也可以在原始画布被修改之前（但上面有图像）保留一份 imageData 的副本，以便每次重复使用。

会发生什么是原始通道值被归一化：

value / 255

在区间 [0.0, 1.0] 中创建一个值

然后将其乘以新颜色，该颜色实际上是该值的百分比。

如果您在整个过程中再次运行此结果，则每次都会减小一个值，因此最终为 0（除非其中一个颜色分量始终为 255）。

希望这有任何意义！ :)

【讨论】：

非常感谢，肯。只是我需要的推动。我最终要做的是在第一个图像元素之上放置第二个图像元素，因此我始终保留原始图像元素，然后根据需要继续交换该图像元素的来源。