Примерка бровей, линз, ресниц на загруженное фото, в браузере

55 000 руб. за проект • наличный расчёт, безналичный расчёт, электронные деньги
13 апреля 2019, 21:27 • 8 откликов • 97 просмотров
Задача - разработать приложение, которое позволит пользователю загружать свое фото, что бы потом на это фото “примерять” брови из существующего каталога товаров. Расположение и изменение размера “новых” бровей должно происходить автоматически.

Пользователь загрузил фото -> появились “новые” брови в нужном месте; нажал на иконку другого продукта - позиционирование повторилось вновь.

Пользователь также должен иметь возможность “подогнать” наложенные элементы.

Из опций редактирования необходимо следующее:

  • Поворот накладываемого элемента (брови)
  • Изменение размера - обычный "resize".
  • Перетаскивание.
Весь этот небольшой редактор должен работать на стороне клиента в браузере. Это касается и распознавания и позиционирования - все на стороне клиента.

На стороне сервера есть Woocommerce, которая отвечает за корзину, каталог товаров и т.д.

Веб-приложение “примерочной” должно быть интегрированно с Woocommerce следующим образом:

  • Список бровей (сами фото и описание) берутся “из Woocommerce” каталога (благо у них есть неплохо задокументированное API, которое отдает все в JSON).
  • Пользователь может нажать add to cart и брови наложенные в данный момент добавятся в корзину.
Элементы управления:

  • Основной холст
    • Загрузить фото
    • Показать оригинал (наложенные брови скрываются)
  • Список товаров
    • При инициализации загружается информация о выбранном продукте и 4 других, что бы была возможность “примерить” несколько вариантов.
    • Кнопка “Показать следующие”, для загрузки дополнительного списка товаров (следующие 5 либо ничего, если все товары уже были загружены).
Пример:

Пользователь зашел на страничку с приложением.
Загрузил фото, и система сама разместила ему "новые" брови в нужном месте и нужной пропорции.
Пользователь подвигал, повертел брови, ему понравилось - нажал добавить в корзину.