HTML5 / JS 中的图像颜色叠加答案

【问题标题】：Image color overlay in HTML5 / JSHTML5 / JS 中的图像颜色叠加
【发布时间】：2011-05-15 22:39:41
【问题描述】：

我有一些带有透明背景的 png 向量，我想在运行中对其进行颜色叠加，因此用户可以选择一个向量，然后从选择器中选择他们想要的颜色。

唯一的规定是它们不能被背景颜色遮盖，因为多个png会被加载到同一个画布上并且需要重叠。

我该如何将图像加载到画布中，然后用某种颜色覆盖它？

编辑：我找到了一些信息 here 和 here（- Nathan 回答），这些信息可以工作，但不是在所有浏览器中。

第二个，尤其是因为我只需要覆盖 png 本身，并且透明度保持透明

【问题讨论】：

你的问题是？（可能很高兴查看FAQ）
抱歉，半睡半醒，因搜索而脑死亡。添加了具体问题。
听起来您想根据用户选择的颜色选择器更改背景颜色。这可以通过 CSS 轻松完成，或者我错过了什么。或者您想在图像顶部放置颜色叠加层？查看github.com/jseidelin/pixastic 或nicolaisi.github.io/tancolor
@NicholasTJ 感谢您的回复，虽然这是 3 岁 ;) 不再需要它，但感谢您的回复，他们似乎是我所要求的。如果你回复我会接受的:)

【解决方案1】：

实际上，您希望将图像加载到画布中并用某种颜色覆盖它，这将为整个图像提供颜色效果。

这个 jQuery 插件正是这样做的，它将图像加载到画布中，操纵颜色以提供漂亮的着色效果并将其转换回图像元素。将其转换回图像元素是非常重要的部分，因为某些用户可能会根据 img 元素而不是 ID 或类来设置 CSS 样式。

只需玩互动demo：

然后通过docs:

玩得开心。

【讨论】：