Наложение ресниц из Woocommerce на загруженное фото, в браузерe

45 000 руб. за проект • наличный расчёт, безналичный расчёт, электронные деньги
22 апреля 2019, 14:07 • 5 откликов • 59 просмотров
Приветствую всех!

Задача - разработать браузерное приложение, которое позволит пользователю загружать свое фото, что бы потом на это фото “примерять” ресницы из существующего каталога товаров (Woocommerce). Расположение и изменение размера “новых” ресниц должно происходить автоматически.

Как это должно работать:
Пользователь зашел на сайт ( под управлением Woocommerce), перешел на страницу с приложением, загрузил свое фото -> появились “новые” ресницы в нужном месте; нажал на иконку другого продукта - позиционирование повторилось вновь.

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

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

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

На стороне сервера есть Woocommerce v 3.5.7 , которая отвечает за корзину, каталог товаров. Тема storefront 2.3.5.

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

  • Список ресниц (сами фото и описание) берутся “из Woocommerce” каталога. У Woocommerce для этого есть неплохо задокументированное API, которое отдает все в JSON - никаких "своих велосипедов" не потребуется.
  • Ресницы из каталога загружаются по частям - т.е. не весь каталог целиком, а только несколько позиций. Следующие несколько позиций - по клику.
Элементы управления на стороне клиента:

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

Для распознавания и позиционирования выбор библиотек не ограничен, но рекомендуется обратить внимание на faceapi-js

Интересует человек с опытом разработки подобного функционала (перетаскивание, поворт, изменение размера картинки).

Стоимость и время выполнения обсуждаемы, готовое решение хотелось-бы получить не позже чем через 10 дней. Никаких сверхъестественных и скрытых "фич" не требуется. Использовать реакт и/или ангуляр не обязательно - загрузить фото, определить точки, разместить на эти точки картинки взятые из Woocommerce.

От вас, как соискателя ожидаю:

  1. Четкий план действий по пунктам (одного предложения достаточно) - на каждый пункт что вы собираетесь делать и сколько это займет у вас времени. Так я буду понимать уровень вашей квалификации и владения предметной областью.
  2. Ссылку на гитхаб и/или примеры выполненных работ.
Со своей стороны:

  1. Готовый дизайн.
  2. Кликабельный прототип.
  3. Верстка (ее делать не нужно).
  4. Своевременная оплата.
  5. Консультация при возникновении вопросов.
Пишите, отвечу на любые интересующие вас вопросы.