Getting Started
Annotorious is a JavaScript library for adding image annotation capabilities to your web application. Try it out below: click or tap the annotation to edit. Click or tap anywhere and drag to create a new annotation.
Use the buttons to switch between rectangle and polygon drawing modes. To close a polygon shape, click or tap the first polygon point again.
OpenSeadragon
Annotorious integrates seamlessly with OpenSeadragon, allowing you to annotate high-resolution zoomable images, including images served via IIIF (International Image Interoperability Framework). Try it out below: use the buttons to switch between moving the image (zooming, panning) and annotating.
Start an annotation with a single mouse click. On a touch device, start the annotation with a drag gesture. If you are not on a touch device, you can still drag or zoom the image while annotating.
When drawing a rectangle, a second mouse click completes it. On a touch device, the rectangle will be completed by simply lifting your finger. When drawing a polygon, a single click or tap adds a point. To close the polygon, click or tap the first point again.
JavaScript API
The Annotorious JavaScript API gives you programmatic control over annotations, enables you to customize behavior and visual styling, and integrate Annotorious with the rest of your application.
With the API, you can:
- add, remove or update annotations programmatically
- listen to user events
- set filters
- apply data-driven styles, etc.
Using Annotorious
You can use Annotorious in your project in several ways depending on your preferred JavaScript framework. Annotorious supports vanilla JavaScript, and provides bindings for React. Bindings for Svelte are currently under development.
Images | OpenSeadragon | TypeScript Support | |
|---|---|---|---|
| Vanilla JS | |||
| React | |||
| Svelte | incomplete |