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

Question

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

我想用jQuery插件做这件事。有没有可以做到的？

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

---

使用示例

---

我发现/想到的事情：

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

Answer 1

如何使用SVG代替？自IE 9以来，SVG为supported in all major browsers。作为基于文本的格式，它体积小，重量轻，易于操作。

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

---

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