How to apply colors to an image through a color palette without Flash?

Asked

Viewed 750 times

0

A client asked me if I could make a system like this. Could someone give me an idea of how to do this without Flash? It has a cup with a detail and the two objects will receive different colors selectable in a color palette.

Where to start in a project of the genre?

javascript jquery html css

2 answers

2

Depends mainly on the complexity of the image and the amount of colors in the palette.

If they are already pre-established colors, and the product image has many details, I believe it is more feasible to use different images of the product, a p/ each color.

But there are several solutions to apply color programmatically.

If the image is in vector, you can easily do it with SVG and jQuery. You can export, for example, an SVG Illustrator image and manipulate the elements with jQuery p/ change colors.

Here has a post explaining how to do this using Canvas and Javascript, with this example related.

This jQuery plugin looks pretty interesting.

To select the color through a palette, there are several jQuery plugins.

  • This may be what I need: http://sandbox.nikorablin.com/productColorizer

1

A purely Javascript solution would be the jsColor plugin (http://jscolor.com/).

Example:

<script src="http://freecms.googlecode.com/svn/trunk/project/WebRoot/js/jscolor/jscolor.js"></script>

<input class="color">

  • Would this system allow me to apply any color to an object? But how would that object receive this color? In what image format should it be?

  • 1

    @Marcosvinicius This interface allows selecting the hexadecimal value of a color, Marks - from there you can apply the value, for example, to the property background-color the style of an element.

  • 1

    Thanks for Fiddle, @Cold !

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.