Как поместить любое изображение поверх другого?

Question

[Anna Kolchina]

Как сделать так, чтобы любое изображение можно было поместить на стакан? Например логотип.

Comments

[Одиночка Айс]

гуглите css позиционирование

[Anna Kolchina]

Одиночка Айс, возможно, вопрос сформулировала не коректно, мне надо программного загрузить изображение, чтобы оно разместилось на объекте. Что-то вроде конструктора.

[Максим]

Anna Kolchina, типа вот так делать ?

[Сергей Соколов]

Уточните, с чем именно помочь.
Как загрузить изображение на страницу (с компа или по ссылке?)
Как исказить плоское изображение, чтобы оно легло на поверхность конуса, с учётом перспективы?

[Anna Kolchina]

Максим Ленский, да

[Anna Kolchina]

Сергей Соколов, как загрузить изображение на страницу с компа и по ссылке

[Максим]

Anna Kolchina, вам скорее всего подходит canvas + ajax

[Anna Kolchina]

Сергей Соколов, на PHP это реально сделать?

[mikhailivanko]

Anna Kolchina, Если речь о том, чтобы готовый "эскиз" из стаканчика и логотипа объединять в одно изображение, то по идее можно на php.

[v3shin]

А цель совмещения какая? Показать пользователю промежуточный результат или дать пользователю возможность скачать конечный результат?

[Anna Kolchina]

v3shin, скачать конечный, нодо ещё по кнопке формировать pdf

Answer 1

[Сергей Соколов]

Как вариант просто рисовать загруженную картинку в canvas поверх дизайна:



Ещё можно помещать дизайн в одну канву, загруженную картинку в другую, и попиксельно пересчитывать, суммируя, в зависимости от альфа-канала. Или от маски стакана. Отрисовывать сумму в третью канву – её и показывать. Первые две прятать.

Так можно будет экспортировать готовый фотомонтаж как скачиваемый файл картинки. Всё в браузере, на JS, без бэкенда.

Недавно делал похожее — на картинку с камеры телефона накладывается видео с прозрачностью, можно делать «снимок» и экспортировать-делиться.

Answer 2

[Rsa97]

Comments

[Anna Kolchina]

Спасибо, но суть вопроса в другом

[Rsa97]

Anna Kolchina, А в чём? Вам нужен готовый скрипт? Так это не сюда, это на Фриланс.

[Anna Kolchina]

Rsa97, мне нужно понять на чем это реализовать

[Rsa97]

Anna Kolchina, JS + прозрачный PNG или SVG.

[Rsa97]

Anna Kolchina, Если нужно загружать логотипы клиентов, то ещё скрипт на сервере, который будет обрабатывать изображение, добавляя конус.