How to display original image size in openseadragon?

Question

I am trying to implement openseadragon zoom plugin in my angular4 application.

Everything is working but i can't able to show the original image size,openseadragon is restricting image size and setting image in center if i use like below,

const viewer = OpenSeadragon({
            id                 : 'seadragon-viewer',
            prefixUrl          : '//openseadragon.github.io/openseadragon/images/',
            tileSources        : this.primaryPicture.hiResInformation,
            showFullPageControl: false,
            showNavigator      : true,
            homeFillsViewer    : false,
        });

If i use homeFillsViewer : true then image is fitting into the div but image is not proper like cropped image.

I want to display original size of image.

Any solutions will be helpful, thank you in advance.

Answer 1

If you want to show real size container for dzi image - your container should have the same dimensions as source image dimensions. To do that you can use this code:

viewer.addHandler('open', function() {
 $("#seadragon-viewer").attr("style", "height: " + 
     (viewer.world.getItemAt(0).source.dimensions.y / 
     window.devicePixelRatio) + "px;" + "width: " + 
     (viewer.world.getItemAt(0).source.dimensions.x / 
     window.devicePixelRatio) + "px");
});

You need to use window.devicePixelRatio for high resolution screens.