用于图像的 Javascript 图层

Question

我目前正在从事一个涉及某些东西的项目，该项目看起来像 Photoshop 项目，但适用于网络。我的意思是：我想创建一个布局，用户可以在其中从预定义的选项（按钮）中进行选择，并且在使用这些按钮时，图像的某些部分会实时更新，例如在 Photoshop 中打开或关闭图层.一个很好的例子是这个： http://www.myflat-luisenpark.berlin/

它是德文的，但如果您点击上面的浴室图片，您将进入浴室配置器，您可以在其中选择不同的组合，这些组合是实时计算的。我认为这背后的技术是：具有透明度并在选择时被覆盖的图层。 检查源代码时，有些事情变得非常明显。当检查某些配置时，它会得到以下代码：

<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;">

就是这样：层组合 3,0,1.....

但是这是如何工作的呢？

希望你能帮助我。也许它甚至不是 javascript？

亲爱的， 彼得

Answer 1

看起来应用程序的逻辑位于服务器上。 <img src="createImage?view=0&layers=3,0,1,0,0,0,0,1&format=jpg" /> 表示服务器上的某些服务 (createImage) 呈现包含所有图层的单个图像，该图像由图像标签显示。

Answer 2

您提供的 HTML 片段是一个 HTML 图像标记，这意味着浏览器从定义的源呈现图像。在这种情况下，源是“createImage”，后跟一些参数。浏览器将从服务器请求该源，因为它是静态图像文件，如 png 或 jpg。服务器负责解释、创建请求的图像并将其发送到浏览器。服务器如何做的实现细节，在客户端是不可见的。