Как реализовать расположение элемента, на картинке?

Question

[Алексей Иванов]

Добрый день! Подскажите, как можно реализовать данный функционал?
- Человек загружает картинку на сайт
- Выбирает на картинке себя и/или друга и добавляет ФИО (аля функционал инсты, когда отмечаешь пользователя на фотке)
- Скачивает картинку с подписями

Comments

[Евгений]

А как вы сами пытались это сделать?

[Сергей Горячев]

Евгений, а зачем? можно просто попросить на Тостере. Сделают.

Answer 1

[Somewhere Intech]

После загрузки фото на сайт, оно отображается пользователю. Он в свою очередь рисует на нём прямоугольник (отмечает лицо) и добавляет подпись ниже (или где нибудь ещё). Нарисовать прямоугольник на фото можно c помощью JS. Родитель img имеет свойство CSS position relative, img и все наложения на него absolute. Прямоугольник можно нарисовать обычным DIV с border и для красоты border-radius к примеру, перемещать и масштабировать с помощью свойств CSS top left width height. Можно конечно и с canvas заморочиться, если нужен UI по интереснее.

Answer 2

[Дима Долготер]

img map
https://www.image-maps.com/
jsfiddle.net/jsWdj