How to implement the location of the element, in the picture?

Question

JavaScript

Good afternoon! Can you please tell me how to implement this functionality?
- A person uploads a picture to the site
- Selects himself and / or a friend in the picture and adds a full name (like the functionality of an insta when you mark a user on a photo)
- Downloads a picture with captions

Answer 1

After uploading a photo to the site, it is displayed to the user. He, in turn, draws a rectangle on it (marks the face) and adds a caption below (or somewhere else). You can draw a rectangle on the photo using JS. The img parent has a CSS position relative property, img and all overlays on it are absolute. The rectangle can be drawn with a normal DIV with a border and for beauty border-radius, for example, moved and scaled using the top left width height CSS properties. Of course, you can also get confused with canvas if you need a more interesting UI.

Answer 2

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