Annotorious

Annotate zoomable high-resolution images by combining Annotorious with OpenSeadragon.

ADD ANNOTATION

NOTE: OpenSeadragon support is still in BETA. Annotation create & edit in fullscreen mode is not supported yet.

Getting Started

Set up OpenSeadragon with your image just like you normally would. An example (taken from this very page):

var viewer = OpenSeadragon({
  id: "openseadragon",
  prefixUrl: "openseadragon/images/",
  showNavigator: false,
  tileSources: {
    type: 'legacy-image-pyramid',
    levels:[{
      url: '2003rosen1799/0001q.jpg',
      height: 889,
      width:  600
    },{
      url: '2003rosen1799/0001r.jpg',
      height: 2201,
      width:  1485
    },{
      url: '2003rosen1799/0001v.jpg',
      height: 4402,
      width:  2970
    }]
  }
});

Make the image annotatable using the Annotorious JavaScript API.

anno.makeAnnotatable(viewer);

Important! There's a little limitation that's specific to zoomable images: since OpenSeadragon normally uses the mouse (click and drag) to navigate the map, you need to add some extra JavaScript that toggles between normal image navigation and Annotorious. The example below attaches a call to the activateSelector() API method to an HTML button:

<button onclick="anno.activateSelector();" href="#">
  ADD ANNOTATION
</button>

Once the selector is activated, Annotorious takes over the image, and dragging the mouse will create an annotation rather than pan the image. Once the annotation has been created, normal image navigation is resumed. Full documentation of the activateSelector function is on the Wiki.