Changing colors of an image dynamically

Question

I was wondering if it was possible if I had an image like: enter image description here

I would be able to change certain parts of the images colors. For example if I wanted the bow green and the present red with yellow stripes, would I have to make a new image that had that or is there a way to program something (elegantly) along the lines of that? I'm just asking to see if its possible and if it is, what language would be best to do this?

Keep in mind this would be a feature on a website.

Is it going to be a coloring application? – Ates Goral Feb 08 '11 at 21:07 — Ates Goral, Feb 08 '11 at 21:07

score 1 · Accepted Answer · edited May 23 '17 at 10:32

That's not going to be easy the way the image is. You have no way to tell the computer which part is the bow, which part is the stripes, and which part is the box. However, if you pre-colored them, you could do a color replace using GD library or imagemagick pretty easily. You'd do this in PHP. Here are some examples of how you could do it, I'd personally go the imagemagick route.

How can I replace one color with another in a png 24 alpha transparent image with GD

http://www.imagemagick.org/Usage/color_basics/#replace (this example even has a similar gift box as the usage case, hehe)

score 0 · Answer 2 · answered Feb 08 '11 at 21:03

0

Try leaving the parts you want changable transparent. Then, give the div it's in a hover state with the second background color.

answered Feb 08 '11 at 21:03

fiiv

1,267
1
8
16

score 0 · Answer 3 · answered Feb 08 '11 at 21:16

You could:

Use an indexed-color image and change the colors in the palette.
Use @MT's suggestion, though it kinda gets out of hand with multiple colors and jagged regions.
Pick control points and fill ("floodfill") the image through them - programmatic version of using the bucket tool.
Use @profitphp's suggestion, which is really better my last one.
Abandon compatibility and use the new canvas element while it still has the "cool" factor :)

score 0 · Answer 4 · edited May 23 '17 at 12:34

i presume this is a web-based painting application; you'll require a human to tell you what the parts are, and where they want the coloring to be.

The issue then becomes how to perform a flood fill at the user's request.

The best i can suggest is perform the flood fill server-side, using an image processing library - handing back the image to the user:

enter image description here

There is no javascript ability to access pixel data of an image.

Edit: Performing flood fill with HTML Canvas

Changing colors of an image dynamically

4 Answers4