Annotating An Image In JavaScript – Annotorious

Preview:

Description:

Annotorious is a simple yet feature-rich JavaScript image annotation library that adds custom comments, notes, tags to a specific part of an image.

Features:

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

How to use it:

1. Install and import the Annotorious as a module.

# NPM
$ npm install @recogito/annotorious --save

import { Annotorious } from '@recogito/annotorious';

2. Or download the package and insert the annotorious.min.js into the HTML document.

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

3. Initialize the Annotorious on the image and we’re ready to go.

<img id="example" src="example.jpg" />

var anno = Annotorious.init({
    image: 'example'
});

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

// annotations.w3c.json
[
  { 
    "@context": "http://www.w3.org/ns/anno.jsonld",
    "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": "http://www.w3.org/TR/media-frags/",
        "value": "xywh=pixel:270,120,90,170"
      }]
    }
  }
]

anno.loadAnnotations('annotations.w3c.json');

3. Enable read-only mode. Defaults to false.

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

4. Disable the editor popup. Defaults to false.

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

5. Add a new annotation to the image following the structure you’ve seen in the annotations.w3c.json.

// add an annotation
anno.addAnnotation(annotation);

// add an array of annotations
anno.setAnnotations(annotations);

6. Remove an annotation from the image.

anno.removeAnnotation(ID);

7. Get all annotations.

anno.getAnnotations();

8. Select an annotation.

// select the current annotation
anno.selectAnnotation();

// select a specific annotation
anno.selectAnnotation(ID);

9. Show/hide the annotations.

anno.setAnnotationsVisible(TRUE/FALSE);

10. Apply a custom template to the annotation.

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

11. Destroy the instance.

anno.destroy();

12. 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);
});

Changelog:

v2.0.2 (05/21/2020)

• Minor bugfixes