Я создаю прогрессивное веб-приложение, использующее квазар-фреймворк (так Vue), и для выполнения одной из функций необходимо, чтобы пользователи загружали изображение -> добавляли предустановленные теги к изображению, чтобы отмечать интересные места -> сохраняли его в своей базе данных. У администраторов сайта будет страница со списком всех созданных изображений с тегами для их просмотра.
с тегами. Я имею в виду небольшие элементы, которые отображаются перед изображением, как карты Google с тегами местоположения. Я подумываю о том, чтобы сделать метки маленькими цветными кружочками, и при нажатии они раскрываются, чтобы показать название меток. Поэтому они должны быть обычными HTML-элементами.
Теперь большая часть этого уже построена (загрузка изображения, его отображение, создание тегов в качестве администратора, загрузка готового изображения в базу данных) Но я ищу рекомендации по созданию части добавления тегов.
Самое большое беспокойство у меня есть:
Поскольку приложение будет использоваться на телефонах, планшетах и компьютерах, изображения будут отзывчивыми. При добавлении элементов в координаты я могу представить, что теги будут появляться в неправильных местах в зависимости от размера изображения.
Я смотрел на такие вещи, как библиотека taggd, но сейчас она устарела, и, похоже, она не позволяет мне создавать различные возможные теги (теги можно создавать в разделе администратора сайта, и пользователи могут выберите только активный выбор для добавления к изображению.)
Я думаю, что мне придется построить это с нуля, и это хорошо, но мне бы очень хотелось получить несколько советов по вышеуказанным вопросам. (Если кто-нибудь знает о библиотеке, которая делает все это, это тоже здорово)
Пожалуйста, дайте мне знать, если мне нужно добавить дополнительную информацию к этому вопросу.
В настоящее время я отображаю изображение так:
<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>