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

Що таке Annotorious?

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

Нижче наведено деякі функції, які підтримує бібліотека Annotorious:

• Малювання фігур: Annotorious дозволяє користувачам малювати на зображеннях такі фігури, як прямокутники, кола, еліпси та анотації від руки.
• Коментарі та примітки: користувачі можуть додавати спеціальні коментарі та примітки до певних частин зображення за допомогою Annotorious.
• Мітки або теги: Annotorious підтримує можливість додавати мітки або теги для анотування різних областей або об’єктів на зображенні.
• Інтеграція: Annotorious можна легко інтегрувати у веб-сторінки та веб-сайти, що забезпечує безперебійну роботу анотацій.
• Налаштування: бібліотека надає параметри для налаштування вигляду та поведінки анотацій відповідно до ваших потреб.
• Сумісність: Annotorious добре працює з різними веб-переглядачами та платформами, що робить його універсальним для різних середовищ.

Статистика GitHub

Ім'я:
Мова:
зірки:
Вилки:
Ліцензія:
Репозиторій востаннє оновлено о

Початок роботи з Annotorious

Є три способи отримати Annotorious і почати використовувати його у своїх веб-проектах.

Після встановлення Node.js виконайте наведену нижче команду:

npm install @recogito/annotorious

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

Завантажте попередньо зібраний останній випуск 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 для інтеграції Annotorious Бібліотека JavaScript. Після інтеграції бібліотеки анотацій зображень ми можемо додати зображення, до якого потрібно додати анотації, і, нарешті, ми можемо написати код JavaScript для ініціалізації бібліотеки Annotorious для додавання анотацій до зображення.

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

Додайте збережені анотації JSON до зображень

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

Примітка. Annotorious відповідає Моделі даних веб-анотацій W3C і Специфікація мультимедійних фрагментів W3C, щоб додати анотації до певних частин або фрагментів медіаресурсу. Тому слід використовувати сумісну файлову структуру JSON.

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

Наведений вище код завантажує дані анотацій із файлу annotations.json і автоматично додає їх до зображення. Наприклад, перегляньте знімок екрана нижче:

Онлайн демо

Ви також можете спробувати два наведені вище приклади в Інтернеті, перевіривши Демонстрація анотації зображення та Демонстрація анотацій зображень на основі JSON для кращого розуміння бібліотеки JavaScript Annotorious.

Висновок

Annotorious є відкритим вихідним кодом і чудовою бібліотекою JavaScript для анотацій: однак вона підтримує лише додавання анотацій до зображень. Крім того, існує також обмежена кількість форм, які можна використовувати для анотацій.

Подібні Продукти