Biblioteca annotòria per a anotacions d'imatge de JavaScript
Afegiu dibuixos, comentaris i etiquetes a les imatges de les pàgines web mitjançant la biblioteca Annotorious en JavaScript.
Què és Annotorious?
Annotorious és una biblioteca d'anotacions d'imatges de codi obert escrita en JavaScript que permet afegir anotacions a les imatges dins del navegador dibuixant formes a les posicions desitjades de la imatge. Sempre que es dibuixa una forma per a l'anotació, també obre una finestra emergent per afegir comentaris i fins i tot etiquetar l'anotació afegint etiquetes. La biblioteca també admet afegir respostes a les anotacions existents i també eliminar-les, si cal.
Algunes de les funcions compatibles amb la biblioteca Annotorious s'enumeren a continuació:
- Dibuixa formes: Annotorious permet als usuaris dibuixar formes com ara rectangles, cercles, el·lipses i anotacions a mà alçada a les imatges.
- Comentaris i notes: els usuaris poden afegir comentaris i notes personalitzats a parts específiques d'una imatge mitjançant Annotorious.
- Etiquetatge o etiquetatge: Annotorious admet la possibilitat d'afegir etiquetes o etiquetes per anotar diferents àrees o objectes dins d'una imatge.
- Integració: Annotorious es pot integrar fàcilment a pàgines web i llocs web, la qual cosa permet una funcionalitat d'anotació perfecta.
- Personalització: la biblioteca ofereix opcions per personalitzar l'aparença i el comportament de les anotacions segons les vostres necessitats.
- Compatibilitat: Annotorious funciona bé amb diversos navegadors web i plataformes, la qual cosa el fa versàtil per a diferents entorns.
Com començar amb Annotorious
Hi ha tres maneres d'obtenir Annotorious i començar a utilitzar-lo als vostres projectes web.
1. Instal·leu mitjançant NPM
Després d'instal·lar Node.js, executeu l'ordre següent:
Instal·leu Annotorious mitjançant NPM
npm install @recogito/annotorious
2. Utilitzeu la biblioteca allotjada mitjançant CDN
Annotorious també està allotjat al servidor CDN gratuït i podeu utilitzar URL com els següents:
- 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. Utilitzeu la versió preconstruïda
Baixeu una versió més recent d'Annotorious des de GitHub. Després d'extreure la versió comprimida, veureu els fitxers següents (on s'utilitzaran annotorious.min.css i annotorious.min.js al lloc web per a l'anotació d'imatges):
- annotorious.min.css
- annotorious.min.js
- annotorious.umd.js.map
- recogito-polyfills.js
Afegeix anotacions a les imatges
Si baixem una versió preconstruïda, obtindrem fitxers annotorious.min.css i annotorious.min.js que es poden enllaçar amb el lloc web a l'etiqueta head per integrar Annotorious Biblioteca JavaScript. Després d'integrar la biblioteca d'anotacions d'imatges, podem afegir una imatge a la qual s'han d'afegir anotacions i, finalment, podem escriure codi JavaScript per inicialitzar la biblioteca Annotorious per afegir anotacions a la imatge.
El codi anterior només mostra una imatge al navegador preparada per a anotacions. Un cop carregada la imatge i la biblioteca al navegador, podem tocar dos cops, mantenir-la premuda i arrossegar a la posició desitjada de la imatge per dibuixar una forma per ressaltar l'àrea requerida. Un cop dibuixada la forma, s'obre una finestra emergent que us permet afegir comentaris i fins i tot etiquetar/etiquetar comentaris relacionats. Per exemple, comproveu la captura de pantalla següent:
Afegiu anotacions emmagatzemades JSON a les imatges
A l'exemple anterior, vam mostrar com integrar la biblioteca Annotorious amb la pàgina web i dibuixar manualment anotacions a la imatge. Tanmateix, també és possible emmagatzemar anotacions predefinides en un fitxer JSON, incloses les seves posicions, carregar dades d'anotacions del fitxer JSON mitjançant el mètode loadAnnotations i després afegir-les automàticament a la imatge.
Nota: Annotorious s'ajusta al Model de dades d'anotació web del W3C i a Especificació de fragments de mitjans del W3C per afegir anotacions a parts o fragments específics d'un recurs multimèdia. Per tant, s'ha d'utilitzar una estructura de fitxers JSON compatible.
A continuació es mostra el fitxer de mostra annotations.json que s'utilitza per afegir anotacions automàticament a la imatge:
El codi anterior carrega les dades d'anotacions del fitxer annotations.json i les afegeix a la imatge automàticament. Per exemple, comproveu la captura de pantalla següent:
Demo en línia
També podeu provar els dos exemples anteriors en línia si consulteu Demo d'anotació d'imatge i Demo d'anotacions d'imatge basat en JSON per entendre millor la biblioteca de JavaScript Annotorious.
Conclusió
Annotorious és de codi obert i una gran biblioteca de JavaScript d'anotacions: tanmateix, només admet afegir anotacions a les imatges. A més, també hi ha un nombre limitat de formes que es poden utilitzar per a anotacions.