I am building a progressive web app using the quasar framework (so Vue) and one of the functionalities needs users to upload an image -> add preset tags to the image to mark places of interest -> save it to my database. admins of the site will have a page that lists all these created images with tags to review them.
with tags I mean small elements that show up in front of the image kinda like google maps with it's location tags. I am thinking of making the tags small colored circles and when clicked they expand to show the tags name. So they will need to be normal html elements.
Now most of this is already built (uploading the image, displaying it, creating the tags as an admin, uploading the finished image to the database) But I am looking for recommendations on how to build the tag adding part.
The biggest concern I have:
Because the app will be used on phones, tablets and computers the images will be responsive. When adding elements on coords I can imagine that the tags will appear on wrong locations based on the sizing of the image.
I have been looking at things like the library taggd but that is now deprecated and it doesn't seem to allow me to make a variety of possible tags (the tags can be created in the admin section of the site and users can only choose of the active selection to add to the image.)
I think I am going to have to build this from scratch which is fine, but I'd really like some advice on above concerns. (If anybody knows of a library that does all this that is also great of course)
Please let me know if I need to add more info to this question.
Currently I am displaying the image like this:
<div class="orientation-landscape">
<q-scroll-area style="width: 800px; height: 400px;">
<img v-if="photo.url" :src="photo.url" id="workingPhoto" />
</q-scroll-area>
</div>