0

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

红色透明图像

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

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

4

2 回答 2

1

您可以使用画布更改颜色：

改变图像的颜色

例如 - 只是干​​隔离代码，但根据需要进行调整：

/// 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);

这是一个在线演示。

此处使用的合成模式将确保仅填充纯色；透明像素将保持透明。你可以填充任何东西，渐变，另一个图像等等。

完成后，您现在可以按原样使用屏幕上的画布（它将显示为图像），或者您可以从画布中获取数据 uri，您可以使用“画布”将其设置为另一个图像元素的源.toDataURL()` 但是，要使最后一个工作，您需要满足CORS要求。最简单的就是直接使用画布。

于 2013-08-25T04:25:15.930 回答
0

你试过opacity过滤器吗？虽然不完全是您可能想要的（即亮度过滤器），但在上述情况下，以下内容给了我粉红色：

img {
    -webkit-filter: opacity(30%);
}

请参阅以下内容：http ://codepen.io/micjamking/pen/222c540689d92ec1df1a3b6e1ea2933f

于 2013-08-25T04:01:04.680 回答