How to build a Preview image by stacking transparent images based on Form selections using JavaScript?

Question

Using HTML, CSS, and JavaScript I need to build a Form with Selection input fields and Radio selection fields. When each one of these fields is selected, I need to build a Preview image based on the selection they made. Each field will have an Image associated with it and then it will also have that same image replicated for each color. So if there was 20 Form fields that a user could pick it would have 20 images x 10 different color options and would result in there being 200 possible images to build there preview image! Here is an image that shows an example of what I am trying to accomplish...the Vans website uses this technique for a custom shoe generator with preview... When you pick a section and then the color for that section, it loads a transparent image and stacks them together. For testing, I have made a set of transparent images for a demo form with only 4 Fields and 3 color choices so 12 images in total. (All shown below) When all the fields have been selected it should b…

Accepted Answer

I created an Angular app that does this, in a more flexible way.

FIDDLE: http://jsfiddle.net/Pha4V/3/

You can easily add shapes, types and colors just by creating new elements in an array. Also, by having the structure defined this way, the code can be easily integrated with a database.

Example:

```
var tops =
[
    new Shape("Triangle", "https://i.stack.imgur.com/wkRaA.png", "Blue"),
    new Shape("Triangle", "https://i.stack.imgur.com/lHk5X.png", "Green"),
    new Shape("Triangle", "https://i.stack.imgur.com/LT6Nn.png", "Red"),
    new Shape("Octagonal", "https://i.stack.imgur.com/FjF7S.png", "Red"),
    new Shape("Octagonal", "https://i.stack.imgur.com/0FWGv.png", "Blue"),
    new Shape("Octagonal", "https://i.stack.imgur.com/92kyY.png", "Green")
];
```

For the future, fonts can be added by adding a fourth parameter and new colors can be added just by adding an element with that color.

New color example:

```
...
    new Shape("Octagonal", "http://...", "Cyan")
...
```

New shape type example:

```
...
    new Shape("Square", "http://...", "Blue")
...
```

The current form of the 'house':

It could be easily saved, as there are variables that define all the selections:

```
$scope.topColor, $scope.topType
$scope.bottomColor, $scope.bottomType
...
```

Different methods of input:

The select method can be changed easily, as the code does not depend on it's type.

Future fonts:

You can easily add new shapes as fonts, and copy the logic from 'tops' and you won't have to generate that many images. You'll have just to generate images with different fonts:

```
var fontBottom =
[
    new Shape("Font", "http://...", "Arial"),
    new Shape("Font", "http://...", "Arial Black")
];

//Then add the methods and the input.
```

How to build a Preview image by stacking transparent images based on Form selections using JavaScript?

Solution

Problem