Bibliotecă anunțată pentru adnotări de imagine JavaScript

Ce este Annotorious?

Annotorious este o bibliotecă de adnotări de imagine open source scrisă în JavaScript care permite adăugarea de adnotări la imagini în browser prin desenarea formelor în pozițiile dorite ale imaginii. Ori de câte ori o formă este desenată pentru adnotare, se deschide și o fereastră pop-up pentru a adăuga comentarii și chiar pentru a eticheta adnotarea adăugând etichete. Biblioteca acceptă, de asemenea, adăugarea de răspunsuri la adnotările existente și, de asemenea, ștergerea acestora, dacă este necesar.

Unele dintre funcțiile acceptate de biblioteca Annotorious sunt enumerate mai jos:

• Desenați forme: Annotorious le permite utilizatorilor să deseneze forme precum dreptunghiuri, cercuri, elipse și adnotări cu mână liberă pe imagini.
• Comentarii și note: utilizatorii pot adăuga comentarii și note personalizate la anumite părți ale unei imagini folosind Annotorious.
• Etichetare sau etichetare: Annotorious acceptă posibilitatea de a adăuga etichete sau etichete pentru a adnota diferite zone sau obiecte dintr-o imagine.
• Integrare: Annotorious poate fi integrat cu ușurință în pagini web și site-uri web, permițând funcționalitatea de adnotare fără întreruperi.
• Personalizare: biblioteca oferă opțiuni pentru personalizarea aspectului și comportamentului adnotărilor pentru a se potrivi nevoilor dvs.
• Compatibilitate: Annotorious funcționează bine cu diverse browsere web și platforme, ceea ce îl face versatil pentru diferite medii.

GitHub Stats

Name:
Language:
Stars:
Forks:
License:
Repository was last updated at

Noțiuni introductive cu Annotorious

Există trei moduri de a obține Annotorious și de a începe să îl utilizați în proiectele dvs. web.

După ce instalați Node.js, executați comanda de mai jos:

npm install @recogito/annotorious

Annotorious este găzduit și pe server CDN gratuit și puteți utiliza adrese URL ca mai jos:

• 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

Descărcați cea mai recentă versiune predefinită a Annotorious de pe GitHub. După ce extrageți versiunea arhivată, veți vedea fișierele de mai jos (unde annotorious.min.css și annotorious.min.js vor fi folosite pe site-ul web pentru adnotarea imaginilor):

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

Adăugați adnotări la imagini

Dacă descarcăm o versiune predefinită, obținem fișiere annotorious.min.css și annotorious.min.js care pot fi conectate cu site-ul web în eticheta head pentru a integra Annotorious Biblioteca JavaScript. După ce biblioteca de adnotări de imagine este integrată, putem adăuga o imagine pe care trebuie adăugate adnotări și, în final, putem scrie cod JavaScript pentru a inițializa biblioteca Annotorious pentru adăugarea de adnotări la imagine.

Codul de mai sus arată pur și simplu o imagine în browser pregătită pentru adnotări. Odată ce imaginea și biblioteca sunt încărcate în browser, putem atinge de două ori, ține apăsat și trage pe poziția dorită a imaginii pentru a desena o formă pentru a evidenția zona necesară. Odată ce forma este desenată, se deschide o fereastră pop-up care vă permite să adăugați comentarii și chiar și să etichetați/etichetați comentariile legate. De exemplu, verificați captura de ecran de mai jos:

Adăugați adnotări JSON stocate la imagini

În exemplul anterior, am arătat cum să integrăm biblioteca Annotorious cu pagina web și să desenăm manual adnotări pe imagine. Cu toate acestea, este, de asemenea, posibil să stocați adnotări predefinite într-un fișier JSON, inclusiv pozițiile acestora, să încărcați datele adnotărilor din fișierul JSON folosind metoda loadAnnotations și apoi să adăugați automat acele adnotări la imagine.

Notă: Annotorious respectă Modelul de date W3C Web Annotation și W3C Media Fragments Specification pentru a adăuga adnotări la anumite porțiuni sau fragmente ale unei resurse media. Deci, ar trebui utilizată o structură de fișiere JSON compatibilă.

Mai jos este exemplul de fișier annotations.json care este folosit pentru a adăuga automat adnotări la imagine:

Codul de mai sus încarcă datele adnotărilor din fișierul annotations.json și le adaugă automat la imagine. De exemplu, verificați captura de ecran de mai jos:

Demo online

De asemenea, puteți încerca cele două exemple de mai sus online, verificând Demonstrație de adnotări de imagine și Demonstrație de adnotări imagine bazate pe JSON pentru o mai bună înțelegere a bibliotecii JavaScript Annotorious.

Concluzie

Annotorious este open source și o bibliotecă JavaScript grozavă de adnotări: totuși, acceptă doar adăugarea de adnotări la imagini. În plus, există și un număr limitat de forme care pot fi utilizate pentru adnotări.

Similar Products