View Full Version : Complicated Javascript based color picker for products

08-31-2010, 05:26 PM
I have been researching like crazy, and I can't find any information that seems to fit what I need!

I am looking for a solution for the following problem:
We have products that have multiple parts that can be colored separately from each other. In other words, if it was a shirt, the sleeves, graphic, front panel, pocket, and back panel could all be a different color. We have a range of color options available that can be up to 50. So, if I made a single image for each combination, we're looking at thousands of images here. How can I use scripts to build a page that can pick all of these options and combine them together in a product image for the customer? Is it even possible?

I have tried layering 4 0r 5 images with relative and absolute positioning, and doing an image swap...but that is not something I can see us using on a regular basis. I must be missing something here. We've been looking around at other sites like Victorias Secret and Old Navy, and like their color changes....but theirs seem to only involve the single color layer.

Thanks for any advice!

08-31-2010, 07:39 PM
you can actually manipulate and create new images for each combination using the PHP GD library.

if you are looking for something using javascript, you will only find a solution similar to what you currently have implemented.

the php gd library can allow you to load images into a "canvas" and deal with them according. keep in mind this is all a server load. you could make a php script to generate the images based on combinations and then use the images you saved from the automated php script to load the specific image combination. the first load on the server would be alot for the original image creations but you wouldn't have to create anything manually. you could even install WAMP and run it there overnight or something :)

08-31-2010, 09:13 PM
Good answer...I have looked into the PHP GD, and I have the capability already installed. I just have no idea how to use it.

I am looking for resources to help me figure out the rest. I have some PHP experience, but at this point it is introductory.

Thanks again for the tip!!!

Old Pedant
08-31-2010, 09:16 PM
Agree with Byter. Not something I'd try to do all in JS code.

If you aren't into PHP, there are similar libraries available for ASP, ASP.NET, JSP, and more.

The "trick" here is probably to find a library that has a "Fill" capability. So you'd simply pick a point in the middle of some outlined region and call "Fill" at that point, passing a color. The function would fill the (presumably originally white or transparent) region with the given color up to the region's boundaries. If you have ever used FILL in Photoshop you'll know exactly what I mean.

The best I could see doing with JavaScript would be to use rectangular regions.

You'd have an image (say the T-shirt) with the regions that you want to color transparent. They wouldn't have to be rectangular, but the boundaries between regions would have to be straight lines. Then you could put colored rectangles behind the transparent regions. This could probably be made to work for, say, T-shirts. But good luck coloring a car that way.