Annotorious Library for JavaScript Image Annotations

What is Annotorious?

Annotorious is an open source image annotation library written in JavaScript that allows adding annotations on images within the browser by drawing shapes on desired positions of the image. Whenever a shape is drawn for annotation, it also opens a popup to add comments and even label the annotation by adding tags. Library also supports adding replies to existing annotations and also delete them, if required.

Some of the features supported by Annotorious library are listed below:

• Draw Shapes: Annotorious enables users to draw shapes such as rectangles, circles, ellipses, and freehand annotations on images.
• Comments & Notes: Users can add custom comments and notes to specific parts of an image using Annotorious.
• Labeling or Tagging: Annotorious supports the ability to add labels or tags to annotate different areas or objects within an image.
• Integration: Annotorious can be easily integrated into web pages and websites, allowing for seamless annotation functionality.
• Customization: The library provides options for customizing the appearance and behavior of annotations to suit your needs.
• Compatibility: Annotorious works well with various web browsers and platforms, making it versatile for different environments.

GitHub Stats

Name:
Language:
Stars:
Forks:
License:
Repository was last updated at

Getting Started with Annotorious

There are three ways to get Annotorious and start using it in your web projects.

1. Install using NPM

After you install Node.js, run below command:

npm install @recogito/annotorious

2. Use hosted library via CDN

Annotorious is also hosted on free CDN server and you can use URLs like below:

• 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. Use pre-built release

Download a pre-built latest release of Annotorious from GitHub. After you extract the zipped release, you will see below files (where annotorious.min.css and annotorious.min.js will be used in website for image annotation):

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

Add Annotations to Images

If we download a pre-built release, we get annotorious.min.css and annotorious.min.js files which can be linked with the website in head tag to integrate Annotorious JavaScript library. After image annotation library is integrated, we can add an image on which annotations has to be added and finally we can write JavaScript code to initialize Annotorious library for adding annotations to the image.

Above code simply shows an image in the browser ready for annotations. Once image and library are loaded in the browser, we can double tap, hold and drag on desired position of the image to draw a shape in order to highlight required area. Once shape is drawn, a popup opens which allows you to add comments and even also label/tag related comments. For example, check below screenshot:

Add JSON Stored Annotations to Images

In the previous example, we showed how to integrate Annotorious library with the web page and manually draw annotations on the image. However, it's also possible to store pre-defined annotations in a JSON file including their positions, load annotations data from JSON file using loadAnnotations method and then automatically add those annotations to the image.

Note: Annotorious conforms to W3C Web Annotation Data Model and W3C Media Fragments Specification to add annotations on specific portions or fragments of a media resource. So, compatible JSON file structure should be used.

Below is the sample annotations.json file which is used to automatically add annotations to the image:

Above code loads annotations data from annotations.json file and adds them to the image automatically. For example, check below screenshot:

Online Demo

You can also try above two examples online by checking Image Annotation demo and JSON based Image Annotations demo for better understanding of Annotorious JavaScript library.

Conclusion

Annotorious is open source and a great annotation JavaScript library: however, it only supports adding annotations to images. Moreover, there are also limited number of shapes which can be used for annotations.

Similar Products