Bibliothèque Annotorious pour les annotations d'images JavaScript

Qu’est-ce qu’Annotorious ?

Annotorious est une bibliothèque d'annotations d'images open source écrite en JavaScript qui permet d'ajouter des annotations sur les images dans le navigateur en dessinant des formes aux positions souhaitées de l'image. Chaque fois qu'une forme est dessinée pour une annotation, elle ouvre également une fenêtre contextuelle pour ajouter des commentaires et même étiqueter l'annotation en ajoutant des balises. La bibliothèque prend également en charge l'ajout de réponses aux annotations existantes et leur suppression, si nécessaire.

Certaines des fonctionnalités prises en charge par la bibliothèque Annotorious sont répertoriées ci-dessous :

• Dessiner des formes : Annotorious permet aux utilisateurs de dessiner des formes telles que des rectangles, des cercles, des ellipses et des annotations à main levée sur des images.
• Commentaires et notes : les utilisateurs peuvent ajouter des commentaires et des notes personnalisés à des parties spécifiques d'une image à l'aide d'Annotorious.
• Étiquetage ou balisage : Annotorious prend en charge la possibilité d'ajouter des étiquettes ou des balises pour annoter différentes zones ou objets dans une image.
• Intégration : Annotorious peut être facilement intégré aux pages Web et aux sites Web, permettant une fonctionnalité d'annotation transparente.
• Personnalisation : la bibliothèque propose des options permettant de personnaliser l'apparence et le comportement des annotations en fonction de vos besoins.
• Compatibilité : Annotorious fonctionne bien avec divers navigateurs et plates-formes Web, ce qui le rend polyvalent pour différents environnements.

Statistiques GitHub

Nom:
Langue:
Étoiles:
Fourchettes:
Licence:
Le référentiel a été mis à jour pour la dernière fois à

Premiers pas avec Annotorious

Il existe trois façons d'obtenir Annotorious et de commencer à l'utiliser dans vos projets Web.

1. Installer à l'aide de NPM

Après avoir installé Node.js, exécutez la commande ci-dessous :

npm install @recogito/annotorious

2. Utilisez la bibliothèque hébergée via CDN

Annotorious est également hébergé sur un serveur CDN gratuit et vous pouvez utiliser les URL comme ci-dessous :

• 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. Utilisez une version prédéfinie

Téléchargez une dernière version prédéfinie d'Annotorious depuis GitHub. Après avoir extrait la version compressée, vous verrez les fichiers ci-dessous (où annotorious.min.css et annotorious.min.js seront utilisés sur le site Web pour l'annotation d'images) :

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

Ajouter des annotations aux images

Si nous téléchargeons une version prédéfinie, nous obtenons les fichiers annotorious.min.css et annotorious.min.js qui peuvent être liés au site Web dans la balise head pour intégrer Annotorious. Bibliothèque JavaScript. Une fois la bibliothèque d'annotations d'image intégrée, nous pouvons ajouter une image sur laquelle des annotations doivent être ajoutées et enfin nous pouvons écrire du code JavaScript pour initialiser la bibliothèque Annotorious pour ajouter des annotations à l'image.

Le code ci-dessus affiche simplement une image dans le navigateur prête pour les annotations. Une fois l'image et la bibliothèque chargées dans le navigateur, nous pouvons appuyer deux fois, maintenir enfoncé et faire glisser sur la position souhaitée de l'image pour dessiner une forme afin de mettre en évidence la zone requise. Une fois la forme dessinée, une fenêtre contextuelle s'ouvre qui vous permet d'ajouter des commentaires et même d'étiqueter/étiqueter des commentaires liés. Par exemple, vérifiez la capture d'écran ci-dessous :

Ajouter des annotations stockées JSON aux images

Dans l'exemple précédent, nous avons montré comment intégrer la bibliothèque Annotorious à la page Web et dessiner manuellement des annotations sur l'image. Cependant, il est également possible de stocker des annotations prédéfinies dans un fichier JSON, y compris leurs positions, de charger les données d'annotations à partir du fichier JSON à l'aide de la méthode loadAnnotations, puis d'ajouter automatiquement ces annotations à l'image.

Remarque : Annotorious est conforme au Modèle de données d'annotation Web du W3C et au Spécification des fragments multimédias du W3C pour ajouter des annotations sur des parties ou des fragments spécifiques d'une ressource multimédia. Une structure de fichier JSON compatible doit donc être utilisée.

Vous trouverez ci-dessous l'exemple de fichier annotations.json utilisé pour ajouter automatiquement des annotations à l'image :

Le code ci-dessus charge les données d'annotations à partir du fichier annotations.json et les ajoute automatiquement à l'image. Par exemple, vérifiez la capture d'écran ci-dessous :

Démo en ligne

Vous pouvez également essayer les deux exemples ci-dessus en ligne en vérifiant la cible Démo d'annotation d'image et Démo d'annotations d'images basées sur JSON pour une meilleure compréhension de la bibliothèque JavaScript Annotorious.

Conclusion

Annotorious est open source et constitue une excellente bibliothèque JavaScript d'annotation : cependant, il ne prend en charge que l'ajout d'annotations aux images. De plus, il existe également un nombre limité de formes pouvant être utilisées pour les annotations.

Produits Similaires