Наложение ресниц из Woocommerce на загруженное фото, в браузерe
45 000 руб. за проект
•
наличный расчёт, безналичный расчёт, электронные деньги
Приветствую всех!
Задача - разработать браузерное приложение, которое позволит пользователю загружать свое фото, что бы потом на это фото “примерять” ресницы из существующего каталога товаров (Woocommerce). Расположение и изменение размера “новых” ресниц должно происходить автоматически.
Как это должно работать:
Пользователь зашел на сайт ( под управлением Woocommerce), перешел на страницу с приложением, загрузил свое фото -> появились “новые” ресницы в нужном месте; нажал на иконку другого продукта - позиционирование повторилось вновь.
Пользователь также должен иметь возможность “подогнать” наложенные элементы.
Из опций редактирования необходимо следующее:
На стороне сервера есть Woocommerce v 3.5.7 , которая отвечает за корзину, каталог товаров. Тема storefront 2.3.5.
Веб-приложение “примерочной” должно быть интегрировано с Woocommerce следующим образом:
Пользователь зашел на страничку с приложением.
Загрузил фото, и система сама разместила ему "новые" ресницы в нужном месте и нужной пропорции.
Для распознавания и позиционирования выбор библиотек не ограничен, но рекомендуется обратить внимание на faceapi-js
Интересует человек с опытом разработки подобного функционала (перетаскивание, поворт, изменение размера картинки).
Стоимость и время выполнения обсуждаемы, готовое решение хотелось-бы получить не позже чем через 10 дней. Никаких сверхъестественных и скрытых "фич" не требуется. Использовать реакт и/или ангуляр не обязательно - загрузить фото, определить точки, разместить на эти точки картинки взятые из Woocommerce.
От вас, как соискателя ожидаю:
Задача - разработать браузерное приложение, которое позволит пользователю загружать свое фото, что бы потом на это фото “примерять” ресницы из существующего каталога товаров (Woocommerce). Расположение и изменение размера “новых” ресниц должно происходить автоматически.
Как это должно работать:
Пользователь зашел на сайт ( под управлением Woocommerce), перешел на страницу с приложением, загрузил свое фото -> появились “новые” ресницы в нужном месте; нажал на иконку другого продукта - позиционирование повторилось вновь.
Пользователь также должен иметь возможность “подогнать” наложенные элементы.
Из опций редактирования необходимо следующее:
- Поворот накладываемого элемента (ресницы)
- Изменение размера ресниц.
- Перетаскивание.
На стороне сервера есть Woocommerce v 3.5.7 , которая отвечает за корзину, каталог товаров. Тема storefront 2.3.5.
Веб-приложение “примерочной” должно быть интегрировано с Woocommerce следующим образом:
- Список ресниц (сами фото и описание) берутся “из Woocommerce” каталога. У Woocommerce для этого есть неплохо задокументированное API, которое отдает все в JSON - никаких "своих велосипедов" не потребуется.
- Ресницы из каталога загружаются по частям - т.е. не весь каталог целиком, а только несколько позиций. Следующие несколько позиций - по клику.
- Основной холст
- Загрузить фото
- Показать оригинал (наложенные ресницы скрываются)
- Список товаров
- При инициализации загружается информация о выбранном продукте и 4 других, чтобы была возможность “примерить” несколько вариантов.
- Кнопка “Показать следующие”, для загрузки дополнительного списка товаров (следующие 5 либо ничего, если все товары уже были загружены).
Пользователь зашел на страничку с приложением.
Загрузил фото, и система сама разместила ему "новые" ресницы в нужном месте и нужной пропорции.
Для распознавания и позиционирования выбор библиотек не ограничен, но рекомендуется обратить внимание на faceapi-js
Интересует человек с опытом разработки подобного функционала (перетаскивание, поворт, изменение размера картинки).
Стоимость и время выполнения обсуждаемы, готовое решение хотелось-бы получить не позже чем через 10 дней. Никаких сверхъестественных и скрытых "фич" не требуется. Использовать реакт и/или ангуляр не обязательно - загрузить фото, определить точки, разместить на эти точки картинки взятые из Woocommerce.
От вас, как соискателя ожидаю:
- Четкий план действий по пунктам (одного предложения достаточно) - на каждый пункт что вы собираетесь делать и сколько это займет у вас времени. Так я буду понимать уровень вашей квалификации и владения предметной областью.
- Ссылку на гитхаб и/или примеры выполненных работ.
- Готовый дизайн.
- Кликабельный прототип.
- Верстка (ее делать не нужно).
- Своевременная оплата.
- Консультация при возникновении вопросов.
В заказе есть исполнитель
При переводе заказа из архивного в актуальный, текущий исполнитель будет снят с задачи.
Выберите тип сделки
С безопасной сделкой вы всегда сможете вернуть средства, если что-то пойдет не так. С простой сделкой вы самостоятельно договариваетесь с исполнителем об оплате и берете на себя решение конфликтов.