如何使用jQuery对PNG图像进行着色，跨浏览器

Question

我试着像这个问题一样做，但更基本：我有一个只有白色和透明颜色的PNG图像。 我需要在给定的RGB十六进制值中着色白色部分，而不触摸透明部分。

我想用jQuery插件做这个。 有没有可以做到这一点？

它必须在所有主要浏览器（IE，FF，GC，Safari）的最新版本中工作，还有较低版本支持的奖励积分。

---

用法示例

---

我发现/想到的事情：

• 像素 ，但没有交叉支持
• CamanJS ，但这不适用于jQuery
• 用这里的另一个div覆盖，但这会损害透明部分
• 使白色部分透明，反之亦然，然后使用背景颜色 - 但图像由用户上传，这不会使其更加用户友好

Answer 1

如何使用SVG呢？ 自IE 9以来，所有主流浏览器都支持 SVG。作为基于文本的格式，它体积小，重量轻，易于操作。

一种快速而肮脏的方法是使用SVG编辑 （在线）或Inkscape （下载）来创建绘图，然后将生成的<svg>元素放到HTML页面上。 这是一个小提琴，展示了它是如何工作的： http ： //jsfiddle.net/t6fAb/

---

更好的是，使用SVG.js完全用JavaScript创建绘图。 这是一个小提琴，展示了它是如何工作的： http ： //jsfiddle.net/WEL4J/