Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Complicated Javascript based color picker for products

    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!

  • #2
    New Coder
    Join Date
    Aug 2010
    Location
    FL
    Posts
    35
    Thanks
    0
    Thanked 1 Time in 1 Post
    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

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile

    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!!!

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •