В настоящее время я работаю над проектом, который включает что-то, похожее на проект Photoshop, но для Интернета. Я имею в виду: я хочу создать макет, где пользователь может выбирать из предопределенных параметров (кнопок), и при использовании этих кнопок определенные части изображения обновляются в реальном времени, например, если вы включаете или выключаете слои в Photoshop. . Вот довольно хороший пример: http://www.myflat-luisenpark.berlin/
Он на немецком языке, но если вы нажмете на изображение ванной комнаты выше, вы попадете в конфигуратор ванной комнаты, где вы можете выбрать различные комбинации, которые рассчитываются в реальном времени. Я думаю, что за этим стоит техника: слои, которые имеют прозрачность и накладываются друг на друга при выборе. При проверке исходного кода кое-что стало очень очевидным. Когда проверяется определенная конфигурация, она получает, например, такой код:
<img alt = "" id = "configurator_image" src = "createImage?view=0&layers=3,0,1,0,0,0,0,1&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?
Дорогие, Питер
Похоже, что логика приложения лежит на сервере. <img src = "createImage?view=0&layers=3,0,1,0,0,0,0,1&format=jpg"
/> говорит, что некоторая служба на сервере (createImage) отображает одно изображение, содержащее все слои, которое отображается тегом изображения.
Если вы посмотрите на запрос изображения в инструментах разработчика, вы увидите что-то вроде этого: HTTP/1.1 200 OK X-Powered-By: Express Content-Type: image/jpg Content-Length: 87706
«X-Powered-By: Express» указывает на сервер node.js с экспресс-фреймворком. Но это только для маршрутизации и не имеет никакого отношения к обработке изображений. Так что это действительно JavaScript, но на стороне сервера :)
Если быть точным: кажется, я не могу понять, как это было построено. Я это понимаю. Конечно, это очень понятно. Но вы, может быть, знаете, есть ли какая-нибудь структура или что-то, что я могу использовать?
Предоставленный вами фрагмент HTML - это тег изображения HTML, что означает, что браузер отображает изображение из определенного источника. В данном случае источником является createImage, за которым следуют некоторые параметры. Браузер запросит этот источник с сервера, как если бы это был файл статического изображения, например png или jpg. Сервер несет ответственность за интерпретацию, создание и отправку запрошенного изображения в браузер. Детали реализации того, как сервер это делает, не видны клиенту.
Большое спасибо! Кажется, в Интернете нет чего-то, что можно было бы использовать в качестве базы? Дело в том, что я действительно не могу поверить, что никто никогда не строил это просто для удовольствия, а вы можете использовать его бесплатно. Может, я немного наивен. Может быть, кодировать что-то подобное сложнее, чем я думаю ...
Привет, спасибо за ответ! Но что это могло быть? Javascript? PHP? Надо ли это кодировать? Может быть, есть какие-то рамки?