如何在HTML5中着色图像

Question

我想为图像着色但不是从原点中减去颜色，而是想添加它们。有没有一种快速的方法在HTML5中用javascript做到这一点？

Answer 1

是的，您可以使用两种简单的方法。

方法1 - 复合模式

复合模式lighter实际上是一种加法模式。

您可以使用一行代码（ online demo here ）激活它：

ctx.globalCompositeOperation = 'lighter';

如果用棕褐色色调的矩形绘制了一半的图像，下一个绘制的内容将添加到背景中的内容，它会为您提供此结果。

方法2 - 手动操作缓冲区

另一种方法是通过几个步骤操纵缓冲区本身 - 这基本上与lighter模式完全相同，但是以“低级”方式完成。

当然，作为基础，您可以通过操作图像数据（乘法，减法，否定，曝光，卷积等）为您提供多种其他可能性：

/// get the pixel data for current content
buffer = ctx.getImageData(0, 0, wh, h);

/// the color for addition
c = {r:0, g: 127, b: 200};

/// loop through pixel array (RGBA = 4 bytes)
for(; i < len; i += 4) {
    data[i]     = data[i]     + c.r;  /// add R
    data[i + 1] = data[i + 1] + c.g;  /// add G
    data[i + 2] = data[i + 2] + c.b;  /// add B
}

/// we're done, put back the new data to canvas
ctx.putImageData(buffer, 0, 0);

结果如下：

不是那么难！请注意，我们不需要限制值，因为此数组缓冲区类型将为我们执行此操作（画布使用的数组类型为Uint8ClampedArray）。

这是 online demo for this approach 。

结论

当然，复合模式更多（实际）低级别，并且比使用JavaScript迭代缓冲区更好。

但你可以使用第二种方法来解决复合模式不支持的问题（例如，它最初有一个较暗的模式 - 然而这是从规范中删除的.xor模式仅适用于alpha位，而不适用于实际像素等等）。

此外 - 如果你不是特别在添加模式之后，你总是可以通过将其颜色的alpha值设置为0.5来绘制下一个形状，或者使用{{1}在顶部绘制图像的情况下，为任何下一个绘制设置alpha值。这将对内容进行着色并表现为乘法模式（最后减少）。