如何使用 jQuery 为 PNG 图像着色，跨浏览器

Question

我正在尝试与this question 中的相同，但更基本：我有一个只有白色和透明颜色的 PNG 图像。我需要在给定的 RGB 十六进制值中为白色部分着色，而不触及透明部分。

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

它必须在所有主要浏览器（IE、FF、GC、Safari）的最新版本中工作，并且对于低版本支持也有加分。

---

示例用法

---

我已经发现/想到的事情：

• Pixastic，但不支持跨浏览器
• CamanJS，但这不适用于 jQuery
• 用另一个 div 覆盖，例如 here，但这会损坏透明部分
• 使白色部分透明，反之亦然，然后使用背景颜色 - 但图像是由用户上传的，这不会使其更加用户友好

Answer 1

改用 SVG 怎么样？ SVG 自 IE 9 起为 supported in all major browsers。作为一种基于文本的格式，它体积小、重量轻且易于操作。

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

---

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