OpenSeaDragonAreaSelector

This OpenSeaDragon plugin introduces a new feature for selecting, moving and resizing selection areas within the viewer.

Demo

Features

• Create + attach an area selector to a viewer.
• Init location + size
• Click and drag to move the area selector.
• Click and drag handles (corners / edges) to resize.
• Constrain position+size to the maximum bounds of a user-defined area, such as the edge of an image.
• Mobile devices supported.

Usage

Include areaselector.js in your project

var selector = new OpenSeaDragon.AreaSelector({
    viewer: viewer,
    visible: true
});

or

var selector = viewer.activateAreaSelector({
    //options
});

Grid Snapping

Specify gridWidth and/or gridHeight to have the area selector snap.

Boundary

Limit where the area selector can be, by defining a boundary rect.