在浏览器中为打印单色图像指定任意颜色

Question

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

现在我希望红色像素显示为我选择的任何颜色。 -webkit-filter之类的问题是否可行？我已经知道如何为它指定一个任意的色调（hue-rotate(Ndeg)）以及如何使它变暗（brightness(N%)），但是让它更亮（即粉红色）就是我。 brightness(200%)没有明显效果。我也试过从白色图像开始，但我似乎无法使其饱和。

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

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

<强> Here is an online demo

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

完成此操作后，您现在可以按原样使用屏幕画布（它将显示为图像），也可以从画布中获取数据uri，您可以将其设置为另一个图像元素的源使用'canvas.toDataURL（）`然而，为了最后这个工作，你需要满足CORS的要求。最简单的是直接使用画布。

Answer 2

您是否尝试过opacity过滤器？虽然不完全是你想要的（即亮度滤镜），但在下面的情况下，下面给出了粉红色：

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

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