JavaScript Image Annotation Library | Annotorious


Annotations library for JavaScript images. Add drawing, annotation, and label functions to images in web pages with just a few lines of code. This project is an updated replay of the old original Annotorious.


  • Load pre-defined annotations from a JSON file.
  • Drag and drop to create new annotations from an editor popup.
  • Based on the W3C WebAnnotation model.

How to make use of it:

1. Install and import the An notorious as a module.

$ npm install @recogito/annotorious --save
import { Annotorious } from '@recogito/annotorious';

2. Download the package deal and insert them annotorious.min.js into the HTML doc.

<script src="annotorious.min.js"></script>

3. Initialize the An notorious on the picture.

<img id="example" src=" " data-lazy-src="?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img id=example src=" " /></noscript>
var anno = Annotorious.init({
    image: 'example'

4. Define your annotations in a w3c.json file and load it on the web page load.

// annotations.w3c.json
    "@context": "",
    "id": "#unique-ID-Here",
    "type": "Annotation",
    "body": [{
      "type": "TextualBody",
      "value": "Comments Here"
    }, {
      "type": "TextualBody",
      "purpose": "tagging",
      "value": "Tag 1"
    }, {
      "type": "TextualBody",
      "purpose": "tagging",
      "value": "Tag 2"
    "target": {
      "selector": [{
        "type": "FragmentSelector",
        "conformsTo": "",
        "value": "xywh=pixel:270,120,90,170"

5. Enable read-only mode.

var anno = Annotorious.init({
    image: 'example',
    readOnly: true

6. Disable the editor popup.

var anno = Annotorious.init({
    image: 'example',
    headless: true

7. Add a brand new annotation to the picture following the construction you’ve seen within the annotations.w3c.json.

// add an annotation
anno.addAnnotation(annotation [, readOnly]);

// add an array of annotations

8. Remove an annotation from the picture.


9. Get all annotations.


10. Select an annotation.

// select the current annotation

// select a specific annotation

11. Show/hide the annotations.


12. Apply a customized template to the annotation.

anno.applyTemplate(template, openEditor[TRUE/FALSE]);

13. Destroy the instance.


14. Event handlers.

anno.on('selectAnnotation', function(annotation) {
  console.log('selected', annotation);

anno.on('createAnnotation', function(a) {
  console.log('created', a);

anno.on('updateAnnotation', function(annotation, previous) {
  console.log('updated', previous, 'with', annotation);

anno.on('deleteAnnotation', function(annotation) {
  console.log('deleted', annotation);

anno.on('mouseEnterAnnotation', function(annotation, event) {
  console.log('mouseEnter', annotation);

anno.on('mouseLeaveAnnotation', function(annotation, event) {
  console.log('mouseLeave', annotation);

Annotating An Image In JavaScript, Image Annotation for Web, Image & Text Annotation Plugins, JavaScript Image Annotation

See Demo And Download

Official Website(recogito): Click Here

This superior jQuery/javascript plugin is developed by recogito. For extra Advanced Usages, please go to the official website.