如何通过使用JavaScript基于表单选择堆叠透明图像来构建预览图像？

我想到了另一种需要更多编程的方法,但是当需要以这种方式维护很多项目时节省了时间.

使用这种方法,你就没有需要为每个颜色和每一个定制的部分创建一个新的形象.

示例:20个项目,每个4个可自定义的部分和20种颜色:

处理图像需要:20 x 4 x 20 = 1600张图像

使用此解决方案中的蒙版:20 x 4 = 80张图像

我们将为每个部分创建一个掩码.在Photoshop中打开图像并剪切图像的每个可自定义部分.因此,您希望每个部件都能够以另一种颜色进行自定义.使这部分变黑,一切都透明.基本上,如果你堆叠所有这些"层",你在每个要自定义的部分都有一个带有纯黑色的鞋.

将这些图层保存在单独的图像中 您现在可以在画布上加载每个图层,并将黑色替换为您选择的颜色或图案.使用这些层来组成鞋子.

最后放一个遮光层,给鞋子带来三维效果.

示意图它看起来像下面的图像.经处理的掩模成为彩色层.结合基本图像,它成为一个彩色项目.您的设计师只需要剪掉补丁即可.

到目前为止,这并不是最简单的编码,但在使用大量颜色和图案时不需要数十个预先切割的图像.

我创建了一个Angular应用程序,以更灵活的方式执行此操作.

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

只需在数组中创建新元素,即可轻松添加形状,类型和颜色.此外,通过以这种方式定义结构,代码可以很容易地与数据库集成.

例:

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

将来,可以通过添加第四个参数来添加字体,只需添加具有该颜色的元素即可添加新颜色.

新颜色示例:

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

新形状类型示例:

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

目前形式的'房子':

它可以很容易地保存,因为有变量定义所有选择:

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

不同的输入方法:

select方法可以轻松更改,因为代码不依赖于它的类型.

未来的字体:

您可以轻松地将新形状添加为字体,并从"顶部"复制逻辑,您不必生成那么多图像.您只需要使用不同的字体生成图像:

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

//Then add the methods and the input.

只因为一个人 - 一个纯粹的CSS3解决方案

好的,就你的目的而言,一个纯粹的CSS解决方案可能不太理想(甚至你的问题标题都是javascript).但是,为了证明它可以在识别CSS3的浏览器中纯粹用CSS完成,这就是证据.应该给予很多信任,因为小提琴,html和css都有一些来自Stefan Moraru的演示小提琴的初始采购, 它确实使用了代码.在Firefox 25,Chrome 31,IE10中测试过.

小提琴演示

HTML

<form>
    <h4>Choose the top type:</h4>

    <input type="radio" id="TopTriangle" name="TopShape" value="Triangle" checked/>Triangle 
    <input type="radio" id="TopOctogon" name="TopShape" value="Octogon"/>Octogon

    <h4>Choose the top color:</h4>

    <input type="radio" id="TopBlue" name="TopColor" value="Blue" checked/>Blue
    <input type="radio" id="TopGreen" name="TopColor" value="Green"/>Green
    <input type="radio" id="TopRed" name="TopColor" value="Red"/>Red

    <h4>Choose the bottom type:</h4>

    <input type="radio" id="BotRect" name="BotShape" value="Rectangle" checked />Rectangle

    <h4>Choose the bottom color:</h4>

    <input type="radio" id="BotBlue" name="BotColor" value="Blue"/>Blue
    <input type="radio" id="BotGreen" name="BotColor" value="Green" checked/>Green
    <input type="radio" id="BotRed" name="BotColor" value="Red"/>Red

    <h4>Choose the entrance color:</h4>

    <input type="radio" id="EntBlue" name="EntColor" value="Blue"/>Blue
    <input type="radio" id="EntGreen" name="EntColor" value="Green"/>Green
    <input type="radio" id="EntRed" name="EntColor" value="Red" checked/>Red

    <div class="house">
        <div class="top">
            <img class="blue triangle" src="http://i.stack.imgur.com/wkRaA.png" />
            <img class="green triangle" src="http://i.stack.imgur.com/lHk5X.png" />
            <img class="red triangle" src="http://i.stack.imgur.com/LT6Nn.png" />
            <img class="blue octogon" src="http://i.stack.imgur.com/0FWGv.png" />
            <img class="green octogon" src="http://i.stack.imgur.com/92kyY.png" />
            <img class="red octogon" src="http://i.stack.imgur.com/FjF7S.png" />
        </div>

        <div class="entrance">
            <img class="blue" src="http://i.stack.imgur.com/jehkB.png" />
            <img class="green" src="http://i.stack.imgur.com/CgYnh.png" />
            <img class="red" src="http://i.stack.imgur.com/lHbKP.png" />
        </div>

        <div class="bottom">
            <img class="blue rect" src="http://i.stack.imgur.com/7P8Ua.png" />
            <img class="green rect" src="http://i.stack.imgur.com/h2Bpc.png" />
            <img class="red rect" src="http://i.stack.imgur.com/jAX1y.png" />
        </div>
    </div>
</form>

CSS

.house {
    width: 100px;
    height: 80px;    
    position: relative;
}

.house .top {
    position: absolute;
    top: 0px;    
    z-index: 2;
}

.house .entrance {
    position: absolute;
    bottom: 0px;        
    z-index: 3;
}

.house .bottom {
    position: absolute;
    bottom: 0px;   
    z-index: 1;
}

img {
    width: 80px;
    height: 80px;
}

.house img {
    display: none; /* default hide all */
}

#TopTriangle:checked ~ #TopBlue:checked ~ .house > .top > .blue.triangle { display: block;}
#TopTriangle:checked ~ #TopGreen:checked ~ .house > .top > .green.triangle { display: block;}
#TopTriangle:checked ~ #TopRed:checked ~ .house > .top > .red.triangle { display: block;}
#TopOctogon:checked ~ #TopBlue:checked ~ .house > .top > .blue.octogon { display: block;}
#TopOctogon:checked ~ #TopGreen:checked ~ .house > .top > .green.octogon { display: block;}
#TopOctogon:checked ~ #TopRed:checked ~ .house > .top > .red.octogon { display: block;}

#BotRect:checked ~ #BotBlue:checked ~ .house > .bottom > .blue.rect { display: block;}
#BotRect:checked ~ #BotGreen:checked ~ .house > .bottom > .green.rect { display: block;}
#BotRect:checked ~ #BotRed:checked ~ .house > .bottom > .red.rect { display: block;}

#EntBlue:checked ~ .house > .entrance > .blue { display: block;}
#EntGreen:checked ~ .house > .entrance > .green { display: block;}
#EntRed:checked ~ .house > .entrance > .red { display: block;}