Nikita Shelimov Nikita Shelimov - 2 years ago 219
HTML Question

Cloth designer. Coloring of the layer

I try to make a cloth designer application within a structure based on layers just like in the Photoshop app.
I'm using an image with alpha channel and beneath it I'm placing div with different background colors. As a result, I expect changing the color of the image.
But I don't have any idea how to put over that image another layer using the same color.
When I try to repeat the same trick, it will fill extra space that I want to be transparent. In other words, I need to paint only the part of
an image, leaving another part transparent.

I tried to use canvas for filling rgb(255,0,255) parts of image, but canvas is too slow.

<div class="preview_under">
<div style="background: transparent url(images/main_template.png);" class="preview_middle">
<div class="preview_over">
<!-- override layers -->
<div class="layer" style="background: url(images/blue.jpg);" data-name="modern" data-section="pocket">
<img src="images/pocket_modern.jpg">
</div>
<!-- /override layers -->
</div>
</div>
<!-- color of the template -->
<div class="fill" style="background: url(images/blue.jpg);"></div>
</div>


Graphical representation of the problem: enter image description here

UPD:
Thanks for all!
I solved my problem using canvas.

I tried globalCompositeOperation property and it works perfectly.
Demo is here.

Answer Source

Thanks for everybody! I solved my problem through the canvas.
I just used globalCompositeOperation property.

..
ctx.drawImage(original, 0, 0);
ctx.globalCompositeOperation = "source-in";
ctx.drawImage(fill, 0, 0);
ctx.globalCompositeOperation = "source-over";
ctx.drawImage(border, 0, 0);
...

Demo is here.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download