This plugin allows you to draw vector annotations over OpenSeadragon deep zoom images. The plugin creates the drawings on a SVG overlay that scales with the image.
You will need both OpenSeadragon and this plugin. You can download the plugin manually or install it with a package manager like Bower or npm.
npm install openseadragon openseadragon-annotations --save-dev
Once OpenSeadragon and the plugin are included in your page, you can start an OpenSeadragon viewer with the plugin in this way:
const viewer = OpenSeadragon({
id: 'viewer',
showNavigator: true,
tileSources: {
Image: {
xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
Url: 'http://content.zoomhub.net/dzis/TDbz_files/',
Format: 'jpg',
Overlap: '1',
TileSize: '254',
ServerFormat: 'Default',
Size: {
Height: '4409',
Width: '7793'
}
}
}
});
const annotations = new OpenSeadragon.Annotations({ viewer });
The viewer screen will have an additional set of icons at the bottom-left side, that you can use to toggle the drawing mode and draw annotatations over the image.
The plugin works on Chrome, Firefox, Opera and Safari. Internet Explorer 9 and above and Microsoft Edge are also supported, but performance is worse in them due to their lack of support for the vector-effect
SVG attribute.