Getting Started with Annotorious

Annotorious lets your users draw rectangle selections on images, and add comments and labels. Try it out on the image below: click the annotation to edit, click and drag with the mouse to create a new annotation

Sample image source: Hallstatt, Austria, by Nick Csakany/Wikimedia Commons. Public Domain.

Include via Script Tag

To include Annotorious on your page, download the latest release and add the script at the end of the <body> section.

<body>
  <div id="content">
    <img id="hallstatt" src="640px-Hallstatt.jpg">
  </div>
  <script>
    (function() {
      var anno = Annotorious.init({
        image: 'hallstatt' // image element or ID
      });

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

      // Add event handlers using .on  
      r.on('createAnnotation', function(annotation) {
        // Do something
      });
    })()
  </script>

  <script type="text/javascript" src="annotorious.min.js"></script>
</body>

From CDN

Alternatively, you can grab the script from the jsDelivr CDN.

<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.0.4/dist/annotorious.min.js"></script>

Using NPM

If you use npm, npm install @recogito/annotorious and then

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

const anno = new Annotorious({
  image: document.getElementById('my-image')
});

OpenSeadragon Plugin

There is a separate version of Annotorious which plugs into the OpenSeadragon viewer for high-resolution images. Setup is just as easy as for the standard version. Read more

Next Steps

Once you have the basics up and running, you will probably want to know more about the data format of the annotations, and how you can store them permanently. Read more about the W3C Web Annotation Model and how to integrate Annotorious with a backend.