Bibliothèque Annotorious pour les annotations d'images JavaScript

Qu'est-ce qu'Annotorious ?

Annotorious est une bibliothèque d'annotation d'images open source écrite en JavaScript qui permet d'ajouter des annotations sur les images dans le navigateur en dessinant des formes sur les positions souhaitées de l'image. Chaque fois qu'une forme est dessinée pour l'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é dans des pages Web et des sites Web, permettant une fonctionnalité d'annotation transparente.
• Personnalisation : la bibliothèque fournit des options permettant de personnaliser l'apparence et le comportement des annotations en fonction de vos besoins.
• Compatibilité : Annotorious fonctionne bien avec divers navigateurs Web et plates-formes, 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. Utiliser la bibliothèque hébergée via CDN

Annotorious est également hébergé sur un serveur CDN gratuit et vous pouvez utiliser des 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é-compilée

Téléchargez une version pré-compilée de Annotorious depuis GitHub. Après avoir extrait la version zippé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 des 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é-compilée, 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 la bibliothèque JavaScript Annotorious. Une fois la bibliothèque d'annotations d'images 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 afin d'ajouter des annotations à l'image.

Le code ci-dessus montre simplement une image dans le navigateur prête à recevoir des annotations. Une fois l'image et la bibliothèque chargées dans le navigateur, nous pouvons appuyer deux fois, maintenir 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/de baliser des commentaires associés. Par exemple, consultez la capture d'écran ci-dessous :

Ajouter des annotations JSON stockées 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 W3C et à la spécification des fragments de média W3C pour ajouter des annotations sur des parties ou des fragments spécifiques d'une ressource multimédia. Par conséquent, une structure de fichier JSON compatible doit être utilisée.

Vous trouverez ci-dessous l'exemple de fichier annotations.json qui est 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, consultez la capture d'écran ci-dessous :

Démo en ligne

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

Conclusion

Annotorious est une bibliothèque JavaScript open source et très utile pour les annotations : cependant, elle ne prend en charge que l'ajout d'annotations aux images. De plus, le nombre de formes pouvant être utilisées pour les annotations est également limité.

Produits Similaires