How to get image bounds without taking into account empty space?

[Zhiul]

In this example the viewport is zoomed out and the image is on the middle. I'd like to know how I could get the bounds of the image at any given position. I'd appreciate it. 😄

[iangilman]

The image bounds are in viewport coordinates, which don't change when you zoom or pan, so you can get them whenever you want. Assuming you just have a single image, you can get them like so:

const bounds = viewer.world.getItemAt(0).getBounds();

Depending on what you want to do, you might want to convert those into one of the other coordinate systems. There are a lot of conversion functions for that. See https://openseadragon.github.io/examples/viewport-coordinates/ for more information on coordinate systems.

[Zhiul]

Thanks for your answer! I didn't formulate the question well, what I actually meant was to get the bounds of the image including x and y relative to the whole viewport. I also needed the value in px, I achieved it in this way:

function getImagePositionOnViewerElement() {
    const viewportBounds = viewer.viewport.getBounds();
    const imageSize = viewer.world.getItemAt(0).getSizeInWindowCoordinates();

    return {
        x: Math.abs(viewportBounds.x) * imageSize.x,
        y: Math.abs(viewportBounds.y) * imageSize.x
    }
}

[iangilman]

I see! Great that you found a solution that works. Looks like you're taking advantage of the fact that, by default, the image is laid out at 0 - 1 in viewport coordinates.

If you ever use a non-square image, you'll probably want to use * imageSize.x on the y: line as well. Otherwise, I don't think you'll get the correct y value. This is because, while the width defaults to 1 in viewport coordinates, the height is always proportional to the aspect ratio of the image.

[Zhiul]

Thanks for the hint! I wasn't aware of it. 😅 Well I think by now it works right!