Libreria Annotorious per annotazioni di immagini JavaScript

Cos'è Annotorious?

Annotorious è una libreria di annotazioni di immagini open source scritta in JavaScript che consente di aggiungere annotazioni sulle immagini all'interno del browser disegnando forme nelle posizioni desiderate dell'immagine. Ogni volta che viene disegnata una forma per l'annotazione, si apre anche un popup per aggiungere commenti e persino etichettare l'annotazione aggiungendo tag. La libreria supporta anche l'aggiunta di risposte alle annotazioni esistenti e anche la loro eliminazione, se necessario.

Alcune delle funzionalità supportate dalla libreria Annotorious sono elencate di seguito:

• Disegna forme: Annotorious consente agli utenti di disegnare forme come rettangoli, cerchi, ellissi e annotazioni a mano libera sulle immagini.
• Commenti e note: gli utenti possono aggiungere commenti e note personalizzati a parti specifiche di un'immagine utilizzando Annotorious.
• Etichettatura o tag: Annotorious supporta la possibilità di aggiungere etichette o tag per annotare diverse aree o oggetti all'interno di un'immagine.
• Integrazione: Annotorious può essere facilmente integrato in pagine Web e siti Web, consentendo funzionalità di annotazione fluide.
• Personalizzazione: la libreria fornisce opzioni per personalizzare l'aspetto e il comportamento delle annotazioni in base alle proprie esigenze.
• Compatibilità: Annotorious funziona bene con vari browser Web e piattaforme, rendendolo versatile per diversi ambienti.

Statistiche GitHub

Nome:
Lingua:
Stelle:
Forchette:
Licenza:
L'ultimo aggiornamento del repository è avvenuto il

Iniziare con Annotorious

Esistono tre modi per diventare Annotorious e iniziare a utilizzarlo nei tuoi progetti web.

1. Installare utilizzando NPM

Dopo aver installato Node.js, esegui il comando seguente:

npm install @recogito/annotorious

2. Utilizza la libreria ospitata tramite CDN

Annotorious è anche ospitato su server CDN gratuito e puoi utilizzare URL come di seguito:

• 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. Utilizzare la versione predefinita

Scarica l'ultima versione predefinita di Annotorious da GitHub. Dopo aver estratto la versione zippata, vedrai i file seguenti (dove annotorious.min.css e annotorious.min.js verranno utilizzati nel sito Web per l'annotazione dell'immagine):

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

Aggiungi annotazioni alle immagini

Se scarichiamo una versione predefinita, otteniamo file annotorious.min.css e annotorious.min.js che possono essere collegati al sito Web nel tag head per integrare Annotorious Libreria JavaScript. Dopo aver integrato la libreria di annotazioni dell'immagine, possiamo aggiungere un'immagine su cui devono essere aggiunte le annotazioni e infine possiamo scrivere il codice JavaScript per inizializzare la libreria Annotorious per aggiungere annotazioni all'immagine.

Il codice sopra mostra semplicemente un'immagine nel browser pronta per le annotazioni. Una volta caricate l'immagine e la libreria nel browser, possiamo toccare due volte, tenere premuto e trascinare sulla posizione desiderata dell'immagine per disegnare una forma ed evidenziare l'area richiesta. Una volta disegnata la forma, si apre un popup che consente di aggiungere commenti e anche commenti relativi all'etichetta/tag. Ad esempio, controlla lo screenshot seguente:

Aggiungi annotazioni archiviate JSON alle immagini

Nell'esempio precedente, abbiamo mostrato come integrare la libreria Annotorious con la pagina web e disegnare manualmente annotazioni sull'immagine. Tuttavia, è anche possibile memorizzare annotazioni predefinite in un file JSON incluse le loro posizioni, caricare i dati delle annotazioni dal file JSON utilizzando il metodo loadAnnotations e quindi aggiungere automaticamente tali annotazioni all'immagine.

Nota: Annotorious è conforme al W3C Web Annotation Data Model e al Specifica dei frammenti multimediali del W3C per aggiungere annotazioni su porzioni o frammenti specifici di una risorsa multimediale. Pertanto, è necessario utilizzare una struttura di file JSON compatibile.

Di seguito è riportato l'esempio di file annotations.json utilizzato per aggiungere automaticamente annotazioni all'immagine:

Il codice sopra carica i dati delle annotazioni dal file annotations.json e li aggiunge automaticamente all'immagine. Ad esempio, controlla lo screenshot seguente:

Dimostrazione in linea

Puoi anche provare i due esempi precedenti online selezionando Demo di annotazione immagine e demo di annotazioni di immagini basate su JSON per una migliore comprensione della libreria JavaScript di Annotorious.

Conclusione

Annotorious è open source e un'ottima libreria JavaScript per le annotazioni: tuttavia, supporta solo l'aggiunta di annotazioni alle immagini. Inoltre, esiste anche un numero limitato di forme che possono essere utilizzate per le annotazioni.

Prodotti Simili