HTML5 / JS 中的图像颜色叠加
我有一些带有透明背景的 png 矢量，我想动态地对它们进行颜色叠加，因此用户可以选择一个矢量，然后从选择器中选择他们想要的颜色。
唯一的规定是它们不能用背景颜色遮盖，因为多个 png 将加载到同一画布上并且需要重叠。
我究竟如何将图像加载到画布中，然后用某种颜色覆盖它？
编辑：我在此处和这里（-内森回答）哪种工作，但不是在所有浏览器。
第二个尤其是因为我只需要覆盖 png 本身，并且透明度保持透明
I have some png vectors with transparent backgrounds that I want to color overlay on the fly, so users can choose a vector and then choose which color they want it from a picker.
Only stipulation is that they cant be masked with background colors, because multiple pngs will be loaded onto the same canvas and will need to overlap.
How exactly do I go about loading an image into a canvas and then overlaying it with a certain color?
Edit: I have found some info here and here ( - answer by Nathan ) which sort of work, but not in all browsers.
The second one especially as I need only the png itself to be overlayed, and the transparencey to stay transparent
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
实际上，您希望将图像加载到画布中并用某种颜色覆盖它，这将为整个图像带来颜色效果。
这个 jQuery 插件正是这样做的，它将图像加载到画布中，操纵颜色提供漂亮的着色效果并将其转换回图像元素。将其转换回图像元素是一个非常重要的部分，因为某些用户可能会基于 img 元素而不是 ID 或类来设计他们的 CSS 样式。
只需玩一下交互式演示：
并浏览演示： com/nicolaisi/tancolor" rel="nofollow">docs：
玩得开心。
Practically you want to load the image into canvas and overlay it with a certain color, that will give a color effect to the overall image.
This jQuery plugin does exactly that, it loads the image into canvas, manipulates the color giving the nice tinting effect and convert it back to image element. Converting this back into image element is a very important part, as some user may style their CSS base on img element, instead of ID or class.
Just play with the interactive demo:
and go through the docs:
Have fun.