Javascript layers to image

Question

iam currently working on a project which involves something, which looks like a Photoshop-Project, but for the web. What I mean is: I want to create a Layout, where a user can choose from predefined options (Buttons) and when using these buttons, certain parts of an image get updated in realtime, like if you are turning layers on or off in Photoshop. A pretty good example is this one: http://www.myflat-luisenpark.berlin/

It's in german but if you click on the bathroomimage above, you get to the bathroom-configurator, where you can choose different combinations, which are calculated in realtime. I think the technic behind this is: Layers which have transparency and get overlayed when chosen. When checking the source-code, something got very evident. When certain configuration is checked, it got this code for instance:

<img alt="" id="configurator_image" src="createImage?view=0&amp;layers=3,0,1,0,0,0,0,1&amp;format=jpg" style="position: absolute; margin: 0px 20px 20px 0px; width: 100%; border: 1px solid rgb(0, 38, 58); display: block;">

so there is it: layers in combination 3,0,1.....

But how does this work?

Hope you can help me. Maybe its not even javascript?

Dears, Peter

Answer 1

Looks like the logic for the application lies on the server. The <img src="createImage?view=0&amp;layers=3,0,1,0,0,0,0,1&amp;format=jpg" /> says that some service on the server (createImage) renders a single image containing all the layers, which gets displayed by the image tag.

Answer 2

The piece of HTML you provided is an HTML image tag which means the browser renders an image from a defined source. The source is in this case "createImage", followed by some parameters. The browser will request that source from the server as it would be a static image file, like png or jpg. It is the responsibility of the server to interpret, create and send the requested image to the browser. The implementation details of how the server does it, are not visible from the client.