-3

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

PeterM
  • 1

2 Answers2

0

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.

Reynicke
  • 1,407
  • 1
  • 11
  • 21
  • Hey thx for the response! But what could it be? Javascript? PHP? Do I have to code it? Is there maybe a framework around? – PeterM Apr 11 '18 at 10:51
  • If you take a look at the image request in the dev tools, you see something like this: `HTTP/1.1 200 OK X-Powered-By: Express Content-Type: image/jpg Content-Length: 87706` The "X-Powered-By: Express" indicates a node.js server with the express framework. But this is just for routing and has nothing to do with the image processing. So it is indeed JavaScript, but server side :) – Reynicke Apr 11 '18 at 15:48
  • So to be exact: It seems that I can't see how this was build. I understand that. Of course this is very understandable. But Do you maybe know if there is any framework around or something I can use? – PeterM Apr 13 '18 at 09:06
0

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.

martink
  • 152
  • 5
  • Thank you very much! It seems there isn't something floating around the internet to use it as base? The thing is: I really can't believe, that nobody ever build this just for fun which u can use then for free. Maybe iam a bit naive. Maybe its more complicated to code something like that than I think... – PeterM Apr 13 '18 at 09:07