1

i want to create a simple webshop for doors and i want to have function where to custom door users can change the color or the texture. But the only way i imagine to do that is to create single .jpg files for all of the doors in all textures and all colors and the to change it. Is there any library or any way i can do the masking and texturing on web? the doors are like these : doortype

and the texture is like these:

texture1 texture2

I have created separete base door, so if the user is changing the door types only the above layer appears with a special style and glass. but i am unable to crate texturized styling and texturized doors.

Weafs.py
  • 22,731
  • 9
  • 56
  • 78
Csabi
  • 3,097
  • 17
  • 59
  • 107
  • 2
    Yes, it is possible. Please share what you have tried and the issues you're having and we'll try to help. – Jay Blanchard Jan 09 '15 at 13:56
  • 1
    If you use png files with transparency set in them you can then use other png files for different texture techniques and background colours for different fill effects. Are you restricted to using jpg's? – lharby Jan 09 '15 at 13:59
  • no i am not, i am using png as glass masks. @iharby. Jay I can not show, you the progress, because of my contract, with the company. – Csabi Jan 09 '15 at 14:08

2 Answers2

2

you can do something like this use img and add opacity and set background for div which is textured

demo - http://jsfiddle.net/wyLtq6hz/

div {
  display: inline-block;
  background: url(https://i.stack.imgur.com/RnQMf.jpg);
}
div img {
  opacity: .8;
  vertical-align: middle;
}
<div>
  <img src="https://i.stack.imgur.com/glt6A.jpg" />
</div>
Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
  • it is nearly perfect, i see. thank you very much. the opacity will be maybe another issur, but i will try to deal with it. it looks cool and this is the only think that matters. – Csabi Jan 09 '15 at 14:19
  • This is pretty close to what I was envisioning. – lharby Jan 09 '15 at 14:50
1

You can use HTML5 canvas for image manipulation. There are several libraries out there that can help you. Here is a tutorial from MSDN. SVG could also do the trick. Read this question from Stackoverflow. Maybe this is a better approach. Hope this helps you.

Community
  • 1
  • 1
NMO
  • 293
  • 1
  • 10