All geek questions in one place

Guidelines for dynamically changing image color areas.

I create an online tool where a person can “build his bike” by choosing colors for various parts (frame, fork, seat, etc.). I start with a clean JPG image on a bicycle with a white frame and black components. What I'm looking for is a little bit about what technical path to take. Some options:

  • PNG with alpha transparency, place background images in different regions.
  • Converting my JPG to SVG and doing color conversion using JS library
  • Use Raphael-JS to draw an image

I did the most extensive testing with Raphael, but I don’t quite understand how all this can come together. The kind person on his mailing list provided a very good proof of the concept ( see here ), but the resulting code is tied to ajax calls on his server to make the result, so I can not reproduce the result locally.

The ultimate goal is to make the bike look realistic using different colors. If anyone knows examples of such projects in which the colors of areas of realistic images are adjusted using JavaScript, I would be very grateful.

+3
source share
2 answers

- HTML 5. , Internet Explorer, (IE 9 ). canvas .

, , , - PNG, , .

canvas, :

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

+1

SVG, , Raphael ( SVG). , , , , . , , ajax, ?

, PNG , PNG . , , IE 6 -PNG - .

0

Source: https://habr.com/ru/post/1789544/

More articles:


All Articles