Create Selections and Annotations on High-Resolution Zoomable Images in ReactJS ( OpenSeadragon + Annotorious)

Annotorious OpenSeadragon implementation in React

This article aims at creating annotations; which are dynamic, storable, and re-creatable selections on top of an image, with their own set of comments, and tags; inside a ReactJS project, with the help of OpenSeadragon as a high-resolution zoomable image viewer and Annotorious as the annotations package.

Annotorious:
Annotorious lets your users draw rectangle and polygon selections on images, and add comments and labels.

This implementation is based on my previous article, where we use OpenSeadragon in a React project, and implement a basic viewer for high-resolution zoomable images. If you do not have the boilerplate, please visit Getting Started with OpenSeadragon in React.

Now that You have your boilerplate running, you must have something like this on your screen.

OpenSeadragon Viewer

Your code in App.js should look like this:

//App.js
import { useEffect, useState } from "react";
import {OpenSeaDragonViewer} from './OpenSeaDragonViewer'
const App = () => {…