javascript - 在浏览器中为单色图像分配任意颜色

Question

假设我有一张只包含红色和透明像素的图像:

现在我希望红色像素显示为我选择的任何颜色。这可能与 -webkit-filter 类似吗？我已经知道如何为其分配任意色调 (hue-rotate(Ndeg)) 以及如何使其变暗 (brightness(N%))，但使其变亮(即粉红色)让我望而却步。 brightness(200%)没有明显效果。我也尝试过从白色图像开始，但我似乎无法使它饱和。

如果有一个 JavaScript 库可以将任何十六进制颜色转换为一系列 CSS 过滤器(或完成此任务的任何其他东西)，那将是最佳选择，但我怀疑这样的库是否存在。如果我能弄清楚，我可能会自己写一个。

Answer 1

您可以使用 Canvas 来更改颜色:

例如 - 只是干​​燥孤立的代码，但根据需要进行调整:

/// draw image onto canvas of same size as image
ctx.drawImage(img, 0, 0);

/// KEY: change composite mode
ctx.globalCompositeOperation = 'source-in';

/// pick any color you want
ctx.fillStyle = '#00f';

/// draw rectangle on top with fill style - only solid pixels will change
ctx.fillRect(0, 0, canvas.width, canvas.height);

Here is an online demo .

此处使用的复合模式将确保只填充纯色；透明像素将保持透明。您可以填充任何东西，渐变、另一张图片等等。

完成后，您现在可以按原样使用屏幕上的 Canvas (它将显示为图像)，或者您可以从 Canvas 中获取数据 uri，您可以通过以下方式将其设置为另一个图像元素的源使用 'canvas.toDataURL()` 然而，为了最后一个工作，你需要完成 CORS要求。最简单的就是直接使用 Canvas 。