CODEWITHSUNDEEP
javascriptjqueryjquery-pluginspngcolorize
user1544337
user1544337

Reputation:

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

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

enter image description here enter image description here enter image description here

Things I found / thought of already:

Upvotes: 5

Views: 4690

Answers (1)

quietmint
quietmint

Reputation: 14153

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/

Upvotes: 3

Related Questions