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

Question

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

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

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

---

用法示例

---

我发现/想到的事情:

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

Answer 1

使用 SVG 来代替怎么样？自 IE 9 起，所有主要浏览器都支持SVG。作为一种基于文本的格式，它体积小、重量轻且易于操作。

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

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