OpenSeadragon allows precise image cropping using polygon shapes. This feature is useful for:
Coordinate Handling: Polygon points should be provided in image coordinates (original pixel dimensions). During rendering, OpenSeadragon converts these to viewport coordinates automatically.
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.
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.
Provide an array of polygons where each polygon is an array of {x, y} coordinate objects:
[
[{x: 197, y: 172}, {x: 226, y: 172}, {x: 226, y: 198}],
[{x: 328, y: 280}, {x: 338, y: 199}, {x: 332, y: 201}]
]
// Apply polygons to a TiledImage
viewer.addHandler('open', function() {
const tiledImage = viewer.world.getItemAt(0);
tiledImage.setCroppingPolygons(yourPolygonsArray);
});