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

Что такое Annotorious?

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, которые можно связать с веб-сайтом в теге head для интеграции библиотеки JavaScript Annotorious. После интеграции библиотеки аннотаций изображений мы можем добавить изображение, на которое должны быть добавлены аннотации, и, наконец, мы можем написать код JavaScript для инициализации библиотеки Annotorious для добавления аннотаций к изображению.

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

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

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

Примечание: Annotorious соответствует W3C Web Annotation Data Model и W3C Media Fragments Specification для добавления аннотаций к определенным частям или фрагментам медиаресурса. Поэтому следует использовать совместимую структуру файла JSON.

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

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

Онлайн-демонстрация

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

Заключение

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

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