Архив: Простой web-конструктор для подстановки фото в png-шаблон (html/php/js)

Описание

Необходимо реализовать упрощенную версию web-конструктора, работающего как на мобильных устройствах, так и на ПК.

png-шаблон всегда один и тот же. Отображается на web-странице в начале работы. В png-шаблоне имеется прозрачная область, через которую должно быть видно загруженное пользователем фото.

Основные действия:

1. Загрузка своего фото и отображение на заднем плане "под" png-шаблоном.

2. Возможность пропорционального увеличения, перемещения в пределах png-шаблона.

3. Сохранение (скачивание) скомпонованного результата в виде jpg-файла.

Под результатом подразумевается слияние png-шаблона с загруженным изображением.



В качестве примера можете посмотреть конструктор на сайте:

https://color23.ru/printing/t-shirts-woman/template-3238483/editor



Только там много функционала, который не нужен, к примеру, вращение, добавление текстов и т.п.

Обратите внимание, что сам png-шаблон должен быть закреплен и всегда отображается на переднем плане, его двигать/уменьшать не нужно.

А загружаемое фото отображается на втором плане за png-шаблоном, и это фото нужно уже двигать, увеличивать.



За пределами зоны редактирования необходимы две кнопки - для загрузки/замены фото.

И вторая кнопка для сохранения (скачивания) полученного результата.



Лучше делать с использованием js-библиотек для работы с canvas.

В изображениях прикреплены примеры шаблона, фото и результата.



В файлах прикреплен png-шаблон с прозрачным фоном.



Пишите вашу цену, сроки.

Оплата на карту Украинского банка, желательно Приват.



В дальнейшем планируются еще разработка подобного функционала (отдельных страниц), только для большего количества фотографий, например:

https://color23.ru/printing/t-shirts-woman/template-3240062/editor

Категория

Веб-программирование