CODEWITHSUNDEEP
cropopenseadragon
gregster
gregster

Reputation: 1

Cropping image from OpenSeadragon

I would like to crop (or clip?) an image from OpenSeaDragon based on a rectangle at the maximum resolution. Right now I send the images to the server side where I crop them, but cropping on client side would be preferable.

Does anyone know the best way to do this?

Variables are x1, y1, (top left) and x2, y2 (bottom right) and these are the image coordinates (not viewport coordinates). Alternatively, I have a Rect object in viewport coordinates. I'd like the cropped region at the maximum resolution, ideally as a jpg.

For context, I want to use the cropped image on another part of the page and also sent it back to the server. I don't need to change anything with the OpenSeaDragon viewer.

I tried this solution: https://openseadragon.github.io/examples/ui-tiledimage-polygon-cropping/.

However, the demo on the site doesn't seem to work. The console reports:

'[TiledImage.setCroppingPolygons] Cropping polygon format not supported
setCroppingPolygons — tiledimage.js:750
(anonymous function) — ui-tiledimage-polygon-cropping:233
setCroppingPolygons — tiledimage.js:751'

I had the same error when I tried implementing it.

polygons = [[rectForCrop.getTopLeft(), rectForCrop.getTopRight(), rectForCrop.getBottomRight(), rectForCrop.getBottomLeft()]]
tiledImage.setCroppingPolygons(rectForCrop);

I am also unsure what to do at this point to get just a cropped jpg.

Upvotes: 0

Views: 324

Answers (1)

iangilman
iangilman

Reputation: 2174

So you want to get a maximum resolution copy of a cropped portion of an image you have loaded? OpenSeadagon really isn't set up for that... It's optimized around showing just the pixels it needs for whatever current view you have. One thing to try would be to make a viewer that's the full dimensions of the image that you want, position the image so just the part you want is visible, then wait for all of the tiles to load (there's an event for that) and then copy the viewer's canvas.

BTW, thank you for the report on the cropping example! I've filed an issue: https://github.com/openseadragon/site-build/issues/264 That feature isn't really what you want, though; it just controls the display.

Upvotes: 0

Related Questions