OpenSeadragon 4.1.1

Example: Crop TiledImage with Polygons

OpenSeadragon TiledImage provides the ability to crop the image using polygons.

The feature takes an array of polygons to crop the TiledImage during draw tiles. The render function will use non-zero winding rule to create the polygons.

You can use OpenSeadragon.Point or plain xy object. Here is an example format of an array of polygons:

[
  [{x: 197, y:172}, {x: 226, y:172}, {x: 226, y:198}, {x: 197, y:198}],
  [{x: 328, y:200}, {x: 330, y:199}, {x: 332, y:201}, {x: 329, y:202}],
  [{x: 321, y:201}, {x: 356, y:205}, {x: 341, y:250}]
]

Coordinates

The draw tiles will convert the provided polygons into the correct position in the viewport. Thus the polygon points are treated as Image coordinates at 0 degree. See Viewport Coordinates for more detail.

A viewer with click event to create cropping polygons. (Click to Zoom is disabled )

Below is the relevant configuration in the example

var viewer = OpenSeadragon({
  ...
  showNavigator: false,
  gestureSettingsMouse: { clickToZoom: false }
  ...
});

var examples = [
  ...
  [ { x: 1571.28, y: 8401.91 }, { x: 1807.08, y: 7972.51 }, { x: 2355.62, y: 7972.51 } ],
  [ { x: 5100.79, y: 8384.53 }, { x: 4932.01, y: 7962.58 }, { x: 4388.43, y: 7965.06 } ],
  ...
]

var tiledImage = viewer.world.getItemAt(0);
tiledImage.setCroppingPolygons(examples);
viewer.forceRedraw();