Advice to dynamically change image color regions

I'm building an online tool where a person can "build their bike" by selecting colors for various parts (frame, for开发者_运维问答k, seat, etc). I'm starting with a clean JPG image of the bike with a white frame and black components. What I'm looking for a little bit of guidance about which technical path to take. Some options are:

• PNG with alpha transparency, place background images over various regions.
• Convert my JPG to SVG and perform color transformation with a JS library
• Use Raphael-JS to draw over the image

I've done my most extensive testing with Raphael, but I don't quite see how it all can come together. A kind person on their mailing list provided a very good proof of concept (see here) but the resultant code is tied to ajax calls on their server to render the result, so I can't really reproduce the result locally.

The end goal is for the bike to look realistic with different colors applied. If anyone knows of examples of similar projects where colors regions of realistic images are adjusted with JavaScript I would be most grateful.

---

Another option is the HTML 5 canvas. All browsers except Internet Explorer support it (IE 9 supports it, too). With the canvas tag you can do your own pixel-operations on an image.

But if you have photorealistic images then I guess you will have better results with using alpha-transparent PNGs created by good a designer and layer them on top to switch colors.

If you don't know the canvas tag then you can find a nice tutorial here:

https://developer.mozilla.org/en/canvas_tutorial

---

My first inclination would be to go with SVG, probably using Raphael (which uses SVG). If it can be made to work, a higher-level library that already does what you want should save you significant time over lower-level image shuffling. Hopefully you can take the given proof of concept and change the ajax-dependent parts, right?

If not, using transparent PNGs is also a good option, provided the PNGs are static. But as you may know, IE 6 can't handle alpha PNGs, and still has significant market share.