Слои 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?

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
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

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