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 ad annotazioni esistenti e anche l'eliminazione, se necessario.

Di seguito sono elencate alcune delle funzionalità supportate dalla libreria Annotorious:

• Disegna forme: Annotorious consente agli utenti di disegnare forme quali 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 una funzionalità di annotazione senza soluzione di continuità.
• Personalizzazione: la libreria offre 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, il che lo rende versatile per diversi ambienti.

Statistiche GitHub

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

Introduzione ad Annotorious

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

1. Installare tramite NPM

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

npm install @recogito/annotorious

2. Utilizzare la libreria ospitata tramite CDN

Annotorious è ospitato anche su un server CDN gratuito e puoi utilizzare URL come quelli indicati 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 una versione pre-costruita più recente di Annotorious da GitHub. Dopo aver estratto la versione compressa, vedrai i file sottostanti (dove annotorious.min.css e annotorious.min.js saranno utilizzati nel sito web per l'annotazione delle immagini):

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

Aggiungere annotazioni alle immagini

Se scarichiamo una versione pre-costruita, otteniamo i file annotorious.min.css e annotorious.min.js che possono essere collegati al sito web nel tag head per integrare la libreria JavaScript di Annotorious. Dopo che la libreria di annotazioni delle immagini è integrata, 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 che l'immagine e la libreria sono caricate nel browser, possiamo toccare due volte, tenere premuto e trascinare sulla posizione desiderata dell'immagine per disegnare una forma in modo da evidenziare l'area richiesta. Una volta disegnata la forma, si apre un popup che consente di aggiungere commenti e persino commenti correlati a etichette/tag. Ad esempio, controlla lo screenshot qui sotto:

Aggiungere annotazioni JSON archiviate 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 alla W3C Media Fragments Specification per aggiungere annotazioni su porzioni o frammenti specifici di una risorsa multimediale. Pertanto, è necessario utilizzare una struttura di file JSON compatibile.

Di seguito è riportato il file di esempio annotations.json che viene 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 qui sotto:

Dimostrazione online

Puoi anche provare i due esempi sopra riportati online consultando demo di annotazione delle immagini e demo di annotazioni delle immagini basate su JSON per comprendere meglio la libreria JavaScript di Annotorious.

Conclusione

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

Prodotti Simili