Annotorious Library voor JavaScript-beeldannotaties

Wat is annotoir?

Annotorious is een open source beeldannotatiebibliotheek geschreven in JavaScript waarmee annotaties aan afbeeldingen in de browser kunnen worden toegevoegd door vormen op de gewenste posities van de afbeelding te tekenen. Telkens wanneer een vorm wordt getekend voor annotatie, wordt er ook een pop-up geopend waarin u opmerkingen kunt toevoegen en zelfs de annotatie kunt labelen door tags toe te voegen. Bibliotheek ondersteunt ook het toevoegen van antwoorden aan bestaande annotaties en deze indien nodig ook verwijderen.

Enkele van de functies die door de Annotorious-bibliotheek worden ondersteund, worden hieronder vermeld:

• Vormen tekenen: Met Annotorious kunnen gebruikers vormen zoals rechthoeken, cirkels, ellipsen en annotaties uit de vrije hand op afbeeldingen tekenen.
• Opmerkingen en notities: gebruikers kunnen met Annotorious aangepaste opmerkingen en notities toevoegen aan specifieke delen van een afbeelding.
• Labeling of tagging: 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, waardoor naadloze annotatiefunctionaliteit mogelijk is.
• Aanpassing: de bibliotheek biedt opties voor het aanpassen van het uiterlijk en het gedrag van annotaties 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 verkrijgen en het in uw webprojecten te gebruiken.

Nadat je Node.js hebt geïnstalleerd, voer je de onderstaande opdracht uit:

npm install @recogito/annotorious

Annotorious wordt ook gehost op een gratis CDN-server en u kunt URL's gebruiken zoals hieronder:

• 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

Download een kant-en-klare nieuwste versie van Annotorious van GitHub. Nadat je de gecomprimeerde release hebt uitgepakt, zie je onderstaande bestanden (waar annotorious.min.css en annotorious.min.js op de website worden gebruikt voor annotatie van afbeeldingen):

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

Voeg annotaties toe aan afbeeldingen

Als we een kant-en-klare release downloaden, krijgen we annotorious.min.css en annotorious.min.js bestanden die in de head-tag aan de website kunnen worden gekoppeld om Annotorious te integreren JavaScript-bibliotheek. Nadat de beeldannotatiebibliotheek is geïntegreerd, kunnen we een afbeelding toevoegen waarop 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 eenvoudigweg een afbeelding in de browser, klaar 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, wordt een pop-up geopend waarmee u opmerkingen kunt toevoegen en zelfs gerelateerde opmerkingen kunt labelen/taggen. Bekijk bijvoorbeeld onderstaande schermafbeelding:

Voeg in JSON opgeslagen annotaties toe aan afbeeldingen

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

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

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

Bovenstaande code laadt annotatiegegevens uit het annotations.json-bestand en voegt deze automatisch toe aan de afbeelding. Bekijk bijvoorbeeld onderstaande schermafbeelding:

Onlinedemo

U kunt de bovenstaande twee voorbeelden ook online proberen door het Demo voor beeldannotatie en JSON-gebaseerde demo van afbeeldingannotaties voor een beter begrip van de Annotorious JavaScript-bibliotheek.

Conclusie

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

Vergelijkbare Producten