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

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

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

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

Забележка: Annotorious отговаря на W3C Web Annotation Data Model и Спецификация на медийни фрагменти на W3C за добавяне на анотации към конкретни части или фрагменти от медиен ресурс. Така че трябва да се използва съвместима JSON файлова структура.

По-долу е примерният файл annotations.json, който се използва за автоматично добавяне на анотации към изображението:

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

Онлайн демо

Можете също да опитате горните два примера онлайн, като проверите Демонстрация на анотация към изображение и демонстрация на JSON базирани анотации на изображения за по-добро разбиране на JavaScript библиотеката на Annotorious.

Заключение

Annotorious е с отворен код и е страхотна JavaScript библиотека за анотации: обаче поддържа само добавяне на анотации към изображения. Освен това има и ограничен брой форми, които могат да се използват за анотации.

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