Annotorious Library for JavaScript-billedannoteringer

Hvad er Annotorious?

Annotorious er et open source billedannoteringsbibliotek skrevet i JavaScript, der gør det muligt at tilføje annoteringer til billeder i browseren ved at tegne figurer på ønskede positioner af billedet. Hver gang en figur tegnes til annotering, åbner den også en pop op for at tilføje kommentarer og endda mærke annoteringen ved at tilføje tags. Biblioteket understøtter også tilføjelse af svar til eksisterende annoteringer og også sletning af dem, hvis det kræves.

Nogle af de funktioner, der understøttes af Annotorious bibliotek, er anført nedenfor:

• Tegn figurer: Annotorious gør det muligt for brugere at tegne figurer som rektangler, cirkler, ellipser og frihåndsanmærkninger på billeder.
• Kommentarer og noter: Brugere kan tilføje brugerdefinerede kommentarer og noter til bestemte dele af et billede ved hjælp af Annotorious.
• Mærkning eller tagging: Annotorious understøtter muligheden for at tilføje etiketter eller tags for at kommentere forskellige områder eller objekter i et billede.
• Integration: Annotorious kan nemt integreres i websider og websteder, hvilket giver mulighed for problemfri annoteringsfunktionalitet.
• Tilpasning: Biblioteket giver muligheder for at tilpasse udseendet og adfærden af annoteringer, så de passer til dine behov.
• Kompatibilitet: Annotorious fungerer godt med forskellige webbrowsere og platforme, hvilket gør den alsidig til forskellige miljøer.

GitHub-statistik

Navn:
Sprog:
Stjerner:
Forgafler:
Licens:
Repository blev sidst opdateret kl

Kom godt i gang med Annotorious

Der er tre måder at blive Annotorious og begynde at bruge det i dine webprojekter.

1. Installer ved hjælp af NPM

Når du har installeret Node.js, skal du køre nedenstående kommando:

npm install @recogito/annotorious

2. Brug hostet bibliotek via CDN

Annotorious er også hostet på gratis CDN-server, og du kan bruge URL'er som nedenfor:

• 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. Brug præbygget udløser

Download en forudbygget seneste udgivelse af Annotorious fra GitHub. Når du har udtrukket den zippede udgivelse, vil du se nedenstående filer (hvor annotorious.min.css og annotorious.min.js vil blive brugt på webstedet til billedannotering):

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

Tilføj kommentarer til billeder

Hvis vi downloader en forudbygget udgivelse, får vi annotorious.min.css og annotorious.min.js filer, som kan linkes til hjemmesiden i head tag for at integrere Annotorious JavaScript bibliotek. Efter at billedannotationsbiblioteket er integreret, kan vi tilføje et billede, hvorpå der skal tilføjes annoteringer, og endelig kan vi skrive JavaScript-kode for at initialisere Annotorious-biblioteket til tilføjelse af annoteringer til billedet.

Ovenstående kode viser blot et billede i browseren klar til annoteringer. Når billedet og biblioteket er indlæst i browseren, kan vi dobbelttryk, hold og træk på den ønskede position af billedet for at tegne en form for at fremhæve det ønskede område. Når formen er tegnet, åbnes en pop op, som giver dig mulighed for at tilføje kommentarer og endda også mærke/tagge relaterede kommentarer. Tjek for eksempel nedenstående skærmbillede:

Føj JSON-lagrede annoteringer til billeder

I det forrige eksempel viste vi, hvordan man integrerer Annotorious-biblioteket med websiden og manuelt tegner anmærkninger på billedet. Det er dog også muligt at gemme foruddefinerede annoteringer i en JSON-fil inklusive deres positioner, indlæse annotationsdata fra JSON-filen ved hjælp af loadAnnotations-metoden og derefter automatisk tilføje disse annoteringer til billedet.

Bemærk: Annotorious er i overensstemmelse med W3C Web Annotation Data Model og W3C Media Fragments Specification for at tilføje annoteringer til specifikke dele eller fragmenter af en medie-ressource. Så kompatibel JSON-filstruktur skal bruges.

Nedenfor er eksempelfilen annotations.json, som bruges til automatisk at tilføje annotationer til billedet:

Ovenstående kode indlæser annotationsdata fra annotations.json-filen og tilføjer dem automatisk til billedet. Tjek for eksempel nedenstående skærmbillede:

Online demo

Du kan også prøve ovenstående to eksempler online ved at tjekke Demo af billedannotering og JSON-baseret Image Annotations-demo for bedre forståelse af Annotorious JavaScript-bibliotek.

Konklusion

Annotorious er open source og et fantastisk JavaScript-annotationsbibliotek: det understøtter dog kun tilføjelse af annoteringer til billeder. Desuden er der også et begrænset antal former, som kan bruges til annoteringer.

Lignende Produkter