How to colorize a PNG image, cross-browser, using jQuery

Question

I'm trying to do the same as in this question, but more basic: I have a PNG image with only white and transparent as colors. I need to colorize the white part, without touching the transparent part, in a given RGB hex value.

I'd like to do this with a jQuery plugin. Is there any that can do this?

It has to work in the latest versions of all major browser (IE, FF, GC, Safari), with bonus points for lower version support as well.

---

Example usage

---

Things I found / thought of already:

• Pixastic, but that doesn't have cross-broswer support
• CamanJS, but that isn't for jQuery
• Overlaying with another div like here, but that would harm the transparent parts
• Making the white parts transparent and vice versa, and then use a background-color - but the images are uploaded by the user and this wouldn't make it more user friendly

Answer 1

How about using SVG instead? SVG is supported in all major browsers since IE 9. As a text-based format, it's small, lightweight, and easy to manipulate.

A quick-and-dirty approach is to use SVG-edit (online) or Inkscape (download) to create your drawing, then simply drop the resulting <svg> element onto your HTML page. Here's a fiddle showing how that could work: http://jsfiddle.net/t6fAb/

---

Better yet, use SVG.js to create the drawing entirely in JavaScript. Here's a fiddle showing how that could work: http://jsfiddle.net/WEL4J/