title: Advice to dynamically change image color regions
body: <p>I'm building an online tool where a person can "build their bike" by selecting colors for various parts (frame, fork, 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:</p>
  
  <ul>
  <li>PNG with alpha transparency, place background images over various regions.</li>
  <li>Convert my JPG to SVG and perform color transformation with a JS library</li>
  <li>Use Raphael-JS to draw over the image</li>
  </ul>
  
  <p>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 (<a href="http://www.propplan.com/#!/projects/propplan/raphaeljs/drawing-over-an-image" rel="nofollow">see here</a>) 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.</p>
  
  <p>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.</p>