crop an image and change home bounds

[brunogml]

Hi,
I have an image 1000x1000 px of which I want to display only the cropped part from coord. (100,100) to coord. (500,500).

The complete image is displayed with the following script:

<script src="seadragon/openseadragon.min.js"></script>
<script type="text/javascript">
    var viewer = OpenSeadragon({
	 maxZoomLevel: 5.0,
        id: "openseadragon1",
        prefixUrl: "seadragon/images/",
	sequenceMode: true,
        tileSources:  [ '.$json.' ]
   });
</script>';

$json is the manifest of the image

Which command should I add to crop this image?
Thanks

[iangilman]

You want setClip:

https://openseadragon.github.io/docs/OpenSeadragon.TiledImage.html#setClip

For example:

viewer.addHandler('open', () => {
    viewer.world.getItemAt(0).setClip(new OpenSeadragon.Rect(100, 100, 400, 400));
});

[brunogml]

Many thanks!
I get the cropped image so

how do I get it automaticcaly so

[iangilman]

You can do that like so:

viewer.addHandler('open', () => {
    const rect = new OpenSeadragon.Rect(100, 100, 400, 400);
    viewer.world.getItemAt(0).setClip(rect);
    viewer.viewport.fitBounds(rect, true);
});

That'll automatically zoom you to that location. However it won't reset the home position, so if the user clicks the "home" button it'll still zoom them back out all the way.

You might try viewer.viewport.setHomeBounds(rect). It's deprecated but I think it should still work. Maybe we need to reinstate it, because it seems like the right choice for this situation.

[Whao510]

How do I get a cropped image instead of cropping it to affect the original image

[iangilman]

OSD doesn't have a feature for that. It might be interesting to explore adding that feature; I imagine it'll take some doing.

Meanwhile, can you crop the image on the server before sending it to OSD?

[pearcetm]

How do I get a cropped image instead of cropping it to affect the original image

OSD doesn't have a feature for that. It might be interesting to explore adding that feature; I imagine it'll take some doing.

Meanwhile, can you crop the image on the server before sending it to OSD?

Isn't this what TiledImage.setCroppingPolygons does? https://openseadragon.github.io/docs/OpenSeadragon.TiledImage.html#setCroppingPolygons

[iangilman]

@pearcetm Both setClip and setCroppingPolygons just hide parts of the image... They don't change the bounds of the image so OSD would treat the image as if it had been truly cropped. I believe that's what @Whao510 is hoping for.

I could see how a "true crop" where the bounds of the image are changed would be nice for working with data sets the developer doesn't have direct control over (or where there's a desire to crop out things nondestructively). I'm not sure how we would go about it, though, as the true bounds of the image are important for tile handling. Also, of course, we would want to maintain backwards compatibility with apps that expect the current behavior. Perhaps some kind of flag on the image that indicates that the World should take into account the clip bounds instead of the full bounds?

I figure the main concern here is just having "home" honor the clip bounds, but perhaps there are other implications as well.

[pearcetm]

@iangilman I wasn't clear on exactly what @Whao510 was looking for - you might be right that it was specifically about the bounds. I thought maybe they were just asking how to crop an image at all.

One way that bounds could be handled for clipped and cropped images is keeping the true bounds as they are (important for tile positioning, as you say) and keep a separate variable (visibleBounds or clippedBounds, maybe) which would be used for constraints, home bounds, etc. For unclipped/uncropped images these would be the same as the original bounds, but would be updated by setClip and setCroppingPolygons to reflect the visible portion of the image. And yes, a flag to enable this behavior makes sense from a backwards compatibility standpoint.

[iangilman]

Yeah, I think that would be a good way to go. We'll see if someone wants to pick up the task.