Getting Started with Annotorious

Annotorious lets your users select rectangle and polygon shapes on images, and add comments and tags. Try it on the image below: click or tap the annotation to edit, click or tap anywhere and drag to create a new annotation.

Use the icons to switch between rectangle and polygon drawing mode. When drawing a polygon, double click closes the shape. When using touch, keep the finger on the screen and hold for a while to close the polygon.

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 and stylesheet files to your page source code.

<head>
  <link rel="stylesheet" href="annotorious.min.css">
</head>

<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  
      anno.on('createAnnotation', function(annotation) {
        // Do something
      });
    })()
  </script>

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

From CDN

Alternatively, you can grab script and stylesheet directly from the jsDelivr CDN.

<!-- CSS stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.12/dist/annotorious.min.css">

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

Using NPM

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

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

import '@recogito/annotorious/dist/annotorious.min.css';

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

A Note on Styled Images

Because of the way Annotorious works, some CSS style rules applied directly to the <img> element can cause compatibility issues. This is especially the case for position, margin and padding rules.

If you need to apply these CSS styles, please do not apply them to the <img> directly. Instead, wrap the image in a <div> and apply your styles to the wrapper <div>.

<!-- This does not work -->
<img src="my-image-1.jpg" style="position:absolute; top:10px; left:10px;" >
<img src="my-image-2.jpg" style="padding:20px" >

<!-- This works -->
<div style="position:absolute; top:10px; left:10px;">
  <img src="my-image-1.jpg">
</div>

<div style="padding:20px;">
  <img src="my-image-2.jpg">
</div>

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 Annotorious’ JavaScript API, or check our guides section for more help and tutorials.

Read More