Annotorious Library för JavaScript-bildanteckningar

Vad är Annotorious?

Annotorious är ett bildkommentarsbibliotek med öppen källkod skrivet i JavaScript som gör det möjligt att lägga till kommentarer på bilder i webbläsaren genom att rita former på önskade positioner i bilden. Närhelst en form ritas för anteckning, öppnar den också en popup för att lägga till kommentarer och till och med etikettera anteckningen genom att lägga till taggar. Biblioteket stöder också att lägga till svar på befintliga kommentarer och även ta bort dem om det behövs.

Några av funktionerna som stöds av Annotorious-biblioteket listas nedan:

• Rita former: Annotorious gör det möjligt för användare att rita former som rektanglar, cirklar, ellipser och frihandsanteckningar på bilder.
• Kommentarer och anteckningar: Användare kan lägga till anpassade kommentarer och anteckningar till specifika delar av en bild med Annotorious.
• Etiketter eller taggning: Annotorious stöder möjligheten att lägga till etiketter eller taggar för att kommentera olika områden eller objekt i en bild.
• Integration: Annotorious kan enkelt integreras i webbsidor och webbplatser, vilket möjliggör sömlös anteckningsfunktion.
• Anpassning: Biblioteket erbjuder alternativ för att anpassa utseendet och beteendet för annoteringar för att passa dina behov.
• Kompatibilitet: Annotorious fungerar bra med olika webbläsare och plattformar, vilket gör den mångsidig för olika miljöer.

GitHub-statistik

Namn:
Språk:
Stjärnor:
Gafflar:
Licens:
Repository uppdaterades senast kl

Komma igång med Annotorious

Det finns tre sätt att bli Annotorious och börja använda den i dina webbprojekt.

1. Installera med NPM

När du har installerat Node.js kör du nedanstående kommando:

npm install @recogito/annotorious

2. Använd värdbibliotek via CDN

Annotorious finns också på gratis CDN-server och du kan använda webbadresser som nedan:

• 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. Använd förbyggd release

Ladda ner en förbyggd senaste version av Annotorious från GitHub. När du har extraherat den zippade versionen kommer du att se nedanstående filer (där annotorious.min.css och annotorious.min.js kommer att användas på webbplatsen för bildkommentarer):

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

Lägg till kommentarer till bilder

Om vi laddar ner en förbyggd version får vi annotorious.min.css- och annotorious.min.js-filer som kan länkas till webbplatsen i head-taggen för att integrera Annotorious JavaScript-bibliotek. Efter att bildkommentarsbiblioteket har integrerats kan vi lägga till en bild där kommentarer måste läggas till och slutligen kan vi skriva JavaScript-kod för att initiera Annotorious-biblioteket för att lägga till kommentarer till bilden.

Ovanstående kod visar helt enkelt en bild i webbläsaren redo för kommentarer. När bilden och biblioteket har laddats i webbläsaren kan vi dubbelknacka, håll och dra på önskad position för bilden för att rita en form för att markera önskat område. När formen har ritats öppnas en popup som låter dig lägga till kommentarer och även etikettera/tagga relaterade kommentarer. Kolla till exempel nedanstående skärmdump:

Lägg till JSON-lagrade kommentarer till bilder

I det föregående exemplet visade vi hur man integrerar Annotorious-biblioteket med webbsidan och manuellt ritar annoteringar på bilden. Det är dock också möjligt att lagra fördefinierade kommentarer i en JSON-fil inklusive deras positioner, ladda annoteringsdata från JSON-filen med metoden loadAnnotations och sedan automatiskt lägga till dessa kommentarer till bilden.

Obs! Annotorious följer W3C Web Annotation Data Model och W3C Media Fragments Specification för att lägga till kommentarer på specifika delar eller fragment av en mediaresurs. Så, kompatibel JSON-filstruktur bör användas.

Nedan är exempelfilen annotations.json som används för att automatiskt lägga till kommentarer till bilden:

Ovanstående kod laddar annotationsdata från annotations.json-filen och lägger till dem i bilden automatiskt. Kolla till exempel nedanstående skärmdump:

Online demo

Du kan också prova ovanstående två exempel online genom att kolla Image Annotation demo och JSON-baserad bildkommentardemo för bättre förståelse av Annotorious JavaScript-biblioteket.

Slutsats

Annotorious är öppen källkod och ett utmärkt JavaScript-bibliotek för kommentarer: det stöder dock bara att lägga till kommentarer till bilder. Dessutom finns det ett begränsat antal former som kan användas för anteckningar.

Liknande Produkter