Click here to Skip to main content
13,147,689 members (29,219 online)
Rate this:
Please Sign up or sign in to vote.
Hi Everybody,

How to change color in parts of an image at run time in or in java script? for example If we take a shoe image then we will able to make color change of its parts like heals,Toe, head, soul , decoration etc at runtime.

Somebody has been done[^]

Kindly Help me. How is it possible by any means?

Thanks in advance!!
Posted 22-Jan-13 6:30am
Updated 22-Jan-13 6:33am
Sergey Alexandrovich Kryukov 22-Jan-13 12:54pm
The site you referenced above require a valid e-mail address, so I would not expect that anyone will try it out.
It does not look good, but my recipe will work for you...

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Doing it one the fly is too impractical. The algorithm are very complex and far from perfect. Better have pre-created images for different options or at least fragments of those images. All the fragment should be pre-created and tested manually, by a good artist, if you need some minimal qualify.

If you really want to take the route of combining fragments on the fly: the fragments (say, one is just the heal, another is some decorative element, etc) should be the parts on a transparent background (using ARGB color with zero alpha channel on the transparent parts. There is a number of "professional secrets" for making such imaging, in particular, making feather selection before erasing, and a lot more.

Even if everything is done "professional", the resulting image may or may not be convincing. I just hope that this cheating could look well enough for your purpose. In real-life images, re-coloring of object parts looks way more complicated then simple combination. Imaging you have some object made of two parts of leather painted using two different colors: blue and red. The read parts will show blue highlights and visa versa. If you want to change red to yellow, you will need to change the highlights on the blue parts. If you use simple combination, you cannot do it. This is extremely difficult to do in general. Unless you use something like ray tracing, which is also very difficult, you you need some quality.

So, coming back to combination approach. Of course, do it all on the server part using System.Drawing. You just take images of different parts and draw it on a newly created bitmap, one on top of another. Here is how:[^],[^] (to obtain Grahics instance to draw on a bitmap).

For drawing a bitmap on a resulting bitmap, use the methods System.Drawing.Graphics.DrawImage.


This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web04 | 2.8.170915.1 | Last Updated 22 Jan 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100