Слои javascript для изображения

В настоящее время я работаю над проектом, который включает что-то, похожее на проект 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?

Дорогие, Питер

3
0
320
2

Ответы 2

Похоже, что логика приложения лежит на сервере. <img src="createImage?view=0&amp;layers=3,0,1,0,0,0,0,1&amp;format=jpg" /> говорит, что некоторая служба на сервере (createImage) отображает одно изображение, содержащее все слои, которое отображается тегом изображения.

Привет, спасибо за ответ! Но что это могло быть? Javascript? PHP? Надо ли это кодировать? Может быть, есть какие-то рамки?

PeterM 11.04.2018 12:51

Если вы посмотрите на запрос изображения в инструментах разработчика, вы увидите что-то вроде этого: HTTP/1.1 200 OK X-Powered-By: Express Content-Type: image/jpg Content-Length: 87706 «X-Powered-By: Express» указывает на сервер node.js с экспресс-фреймворком. Но это только для маршрутизации и не имеет никакого отношения к обработке изображений. Так что это действительно JavaScript, но на стороне сервера :)

Reynicke 11.04.2018 17:48

Если быть точным: кажется, я не могу понять, как это было построено. Я это понимаю. Конечно, это очень понятно. Но вы, может быть, знаете, есть ли какая-нибудь структура или что-то, что я могу использовать?

PeterM 13.04.2018 11:06

Предоставленный вами фрагмент HTML - это тег изображения HTML, что означает, что браузер отображает изображение из определенного источника. В данном случае источником является createImage, за которым следуют некоторые параметры. Браузер запросит этот источник с сервера, как если бы это был файл статического изображения, например png или jpg. Сервер несет ответственность за интерпретацию, создание и отправку запрошенного изображения в браузер. Детали реализации того, как сервер это делает, не видны клиенту.

Большое спасибо! Кажется, в Интернете нет чего-то, что можно было бы использовать в качестве базы? Дело в том, что я действительно не могу поверить, что никто никогда не строил это просто для удовольствия, а вы можете использовать его бесплатно. Может, я немного наивен. Может быть, кодировать что-то подобное сложнее, чем я думаю ...

PeterM 13.04.2018 11:07

Другие вопросы по теме