Annotorious-bibliotheek voor JavaScript-afbeeldingannotaties

Wat is Annotorious?

Annotorious is een open source afbeeldingannotatiebibliotheek geschreven in JavaScript waarmee u annotaties op afbeeldingen in de browser kunt toevoegen door vormen op gewenste posities van de afbeelding te tekenen. Wanneer een vorm voor annotatie wordt getekend, opent het ook een pop-up om opmerkingen toe te voegen en zelfs de annotatie te labelen door tags toe te voegen. De bibliotheek ondersteunt ook het toevoegen van antwoorden op bestaande annotaties en het verwijderen ervan, indien nodig.

Hieronder staan enkele functies die door de Annotorious-bibliotheek worden ondersteund:

• Vormen tekenen: Met Annotorious kunnen gebruikers vormen zoals rechthoeken, cirkels, ellipsen en aantekeningen op afbeeldingen tekenen.
• Opmerkingen en notities: Gebruikers kunnen met Annotorious aangepaste opmerkingen en notities toevoegen aan specifieke delen van een afbeelding.
• Labelen of taggen: Annotorious ondersteunt de mogelijkheid om labels of tags toe te voegen om verschillende gebieden of objecten binnen een afbeelding te annoteren.
• Integratie: Annotorious kan eenvoudig worden geïntegreerd in webpagina's en websites, wat zorgt voor een naadloze annotatiefunctionaliteit.
• Aanpassing: De bibliotheek biedt opties waarmee u het uiterlijk en gedrag van aantekeningen kunt aanpassen aan uw behoeften.
• Compatibiliteit: Annotorious werkt goed met verschillende webbrowsers en platforms, waardoor het veelzijdig is voor verschillende omgevingen.

GitHub-statistieken

Naam:
Taal:
Sterren:
Vorken:
Licentie:
De opslagplaats is voor het laatst bijgewerkt op

Aan de slag met Annotorious

Er zijn drie manieren om Annotorious te downloaden en te gebruiken in uw webprojecten.

1. Installeren met behulp van NPM

Nadat u Node.js hebt geïnstalleerd, voert u de onderstaande opdracht uit:

npm install @recogito/annotorious

2. Gebruik gehoste bibliotheek via CDN

Annotorious wordt ook gehost op een gratis CDN-server en u kunt hiervoor de onderstaande URL's gebruiken:

• 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. Gebruik een vooraf gebouwde release

Download een voorgebouwde nieuwste versie van Annotorious van GitHub. Nadat u de gezipte versie hebt uitgepakt, ziet u onderstaande bestanden (waar annotorious.min.css en annotorious.min.js worden gebruikt in de website voor afbeeldingsannotatie):

• annotorious.min.css
• annotorious.min.js
• berucht.umd.js.map
• regegoto-polyfills.js

Annotaties toevoegen aan afbeeldingen

Als we een vooraf gebouwde release downloaden, krijgen we annotorious.min.css en annotorious.min.js bestanden die kunnen worden gekoppeld aan de website in de head tag om de Annotorious JavaScript bibliotheek te integreren. Nadat de image annotation bibliotheek is geïntegreerd, kunnen we een afbeelding toevoegen waaraan annotaties moeten worden toegevoegd en ten slotte kunnen we JavaScript code schrijven om de Annotorious bibliotheek te initialiseren voor het toevoegen van annotaties aan de afbeelding.

Bovenstaande code toont simpelweg een afbeelding in de browser die klaar is voor annotaties. Zodra de afbeelding en bibliotheek in de browser zijn geladen, kunnen we dubbeltikken, vasthouden en slepen op de gewenste positie van de afbeelding om een vorm te tekenen om het gewenste gebied te markeren. Zodra de vorm is getekend, opent er een pop-up waarmee u opmerkingen kunt toevoegen en zelfs ook label-/taggerelateerde opmerkingen. Bekijk bijvoorbeeld onderstaande schermafbeelding:

Voeg JSON-opgeslagen annotaties toe aan afbeeldingen

In het vorige voorbeeld lieten we zien hoe u de Annotorious-bibliotheek integreert met de webpagina en handmatig annotaties op de afbeelding tekent. Het is echter ook mogelijk om vooraf gedefinieerde annotaties op te slaan in een JSON-bestand, inclusief hun posities, annotatiegegevens te laden uit het JSON-bestand met behulp van de loadAnnotations-methode en vervolgens automatisch die annotaties aan de afbeelding toe te voegen.

Opmerking: Annotorious voldoet aan het W3C Web Annotation Data Model en de W3C Media Fragments Specification om annotaties toe te voegen aan specifieke delen of fragmenten van een mediabron. Daarom moet een compatibele JSON-bestandsstructuur worden gebruikt.

Hieronder ziet u het voorbeeldbestand annotations.json dat wordt gebruikt om automatisch annotaties aan de afbeelding toe te voegen:

De bovenstaande code laadt annotatiegegevens uit het bestand annotations.json en voegt ze automatisch toe aan de afbeelding. Bekijk bijvoorbeeld onderstaande schermafbeelding:

Online-demo

U kunt ook de bovenstaande twee voorbeelden online uitproberen door Image Annotation demo en JSON based Image Annotations demo te bekijken voor een beter begrip van de Annotorious JavaScript-bibliotheek.

Conclusie

Annotorious is open source en een geweldige annotatie JavaScript-bibliotheek: het ondersteunt echter alleen het toevoegen van annotaties aan afbeeldingen. Bovendien is er ook een beperkt aantal vormen dat kan worden gebruikt voor annotaties.

Vergelijkbare Producten