html - 如何在 HTML5 中为图像着色

Question

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

Answer 1

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

方法 1 - 复合模式

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

您可以使用一行代码激活它（此处为在线演示）：

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）。

这是此方法的在线演示。

结论

当然，复合模式更（实际）低级，因此比使用 JavaScript 迭代缓冲区执行得更好。

但是对于复合模式不支持的事情，您可以使用第二种方法（例如，它最初有一个变暗模式 - 但是这已从规范中删除。异或模式仅适用于 alpha 位，而不适用于实际像素等）。

此外 - 如果您不是特别喜欢加法模式，您可以通过将其颜色的 alpha 值设置为 来在顶部绘制下一个形状0.5，或者globalAlpha在您在顶部绘制图像的情况下为任何下一次绘制设置 alpha 值。这将为内容着色并表现为乘法模式（最后减少）。