Annotorious библиотека для аннотаций изображений JavaScript

Что такое Анноториус?

Annotorious — это библиотека аннотаций изображений с открытым исходным кодом, написанная на JavaScript, которая позволяет добавлять аннотации к изображениям в браузере, рисуя фигуры в нужных позициях изображения. Всякий раз, когда фигура рисуется для аннотации, она также открывает всплывающее окно для добавления комментариев и даже пометки аннотации путем добавления тегов. Библиотека также поддерживает добавление ответов к существующим аннотациям, а также их удаление при необходимости.

Некоторые функции, поддерживаемые библиотекой Annotorious, перечислены ниже:

• Рисование фигур. Annotorious позволяет пользователям рисовать на изображениях такие фигуры, как прямоугольники, круги, эллипсы и рукописные аннотации.
• Комментарии и примечания. Пользователи могут добавлять собственные комментарии и примечания к определенным частям изображения с помощью Annotorious.
• Маркировка или тегирование. Annotorious поддерживает возможность добавлять метки или теги для аннотирования различных областей или объектов на изображении.
• Интеграция. Annotorious можно легко интегрировать в веб-страницы и веб-сайты, обеспечивая бесперебойную функциональность аннотаций.
• Настройка. Библиотека предоставляет возможности настройки внешнего вида и поведения аннотаций в соответствии с вашими потребностями.
• Совместимость. Annotorious хорошо работает с различными веб-браузерами и платформами, что делает его универсальным для различных сред.

Статистика GitHub

Имя:
Язык:
Звезды:
Вилки:
Лицензия:
Репозиторий последний раз обновлялся на

Начало работы с Annotorious

Есть три способа получить Annotorious и начать использовать его в своих веб-проектах.

1. Установите с помощью NPM

После установки Node.js выполните следующую команду:

npm install @recogito/annotorious

2. Используйте размещенную библиотеку через CDN.

Annotorious также размещен на бесплатном сервере CDN, и вы можете использовать URL-адреса, как показано ниже:

• JS: https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.js
• CSS: https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.css

3. Используйте готовый выпуск

Загрузите предварительно созданную последнюю версию Annotorious с GitHub. После извлечения заархивированного релиза вы увидите файлы ниже (где annotorious.min.css и annotorious.min.js будут использоваться на веб-сайте для аннотаций изображений):

• annotorious.min.css
• annotorious.min.js
• annotorious.umd.js.map
• recogito-polyfills.js

Добавляйте аннотации к изображениям

Если мы загрузим готовую версию, мы получим файлы annotorious.min.css и annotorious.min.js, которые можно связать с веб-сайтом в теге заголовка для интеграции Annotorious. Библиотека JavaScript. После интеграции библиотеки аннотаций изображений мы можем добавить изображение, к которому необходимо добавить аннотации, и, наконец, мы можем написать код JavaScript для инициализации библиотеки Annotorious для добавления аннотаций к изображению.

Приведенный выше код просто показывает изображение в браузере, готовое для аннотаций. После загрузки изображения и библиотеки в браузер мы можем дважды нажать, удерживать и перетащить желаемое положение изображения, чтобы нарисовать фигуру и выделить нужную область. После того, как фигура нарисована, открывается всплывающее окно, которое позволяет вам добавлять комментарии и даже помечать/помечать связанные комментарии. Например, проверьте скриншот ниже:

Добавление сохраненных аннотаций JSON к изображениям

В предыдущем примере мы показали, как интегрировать библиотеку Annotorious с веб-страницей и вручную рисовать аннотации на изображении. Однако также можно хранить заранее определенные аннотации в файле JSON, включая их позиции, загружать данные аннотаций из файла JSON с помощью метода loadAnnotations, а затем автоматически добавлять эти аннотации к изображению.

Примечание. Annotorious соответствует модели данных веб-аннотаций W3C и Спецификация медиафрагментов W3C для добавления аннотаций к определенным частям или фрагментам медиаресурса. Поэтому следует использовать совместимую файловую структуру JSON.

Ниже приведен пример файла annotations.json, который используется для автоматического добавления аннотаций к изображению:

Приведенный выше код загружает данные аннотаций из файла annotations.json и автоматически добавляет их к изображению. Например, проверьте скриншот ниже:

Онлайн-демо

Вы также можете попробовать два приведенных выше примера в Интернете, проверив цель Демонстрация аннотации к изображению и Демонстрация аннотаций к изображениям на основе JSON для лучшего понимания библиотеки Annotorious JavaScript.

Заключение

Annotorious — это отличная библиотека JavaScript с открытым исходным кодом, однако она поддерживает только добавление аннотаций к изображениям. Более того, существует ограниченное количество форм, которые можно использовать для аннотаций.

Похожие Продукты