2

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.

Siva Kumar S
  • 409
  • 1
  • 6
  • 21

2 Answers2

4

By original size you mean you want a 1 to 1 correspondence between pixels in your image and pixels on the screen? To figure out the zoom for that you'll have to compare the size of your viewer to the size of your image and zoom appropriately. Something like this:

viewer.addHandler('open', function() {
  var tiledImage = viewer.world.getItemAt(0); // Assuming you just have a single image in the viewer
  var targetZoom = tiledImage.source.dimensions.x / viewer.viewport.getContainerSize().x;
  viewer.viewport.zoomTo(targetZoom, null, true);
});

Here it is in action: https://codepen.io/iangilman/pen/RZxEWZ

iangilman
  • 2,144
  • 1
  • 13
  • 16
  • Original size means what ever image size given in source like height:1300 and width:1200 should display in the viewer with the same size but currently viewer is restricting all images to the particular size irrespective of the original size – Siva Kumar S Aug 19 '17 at 08:18
  • Okay, then I think we're talking about the same thing. This code should do the trick. Note that you'll still need to pan. – iangilman Aug 19 '17 at 15:22
  • 1
    This seems didn't work for me. I will try to find out the issue and will post the solution, if it works fine. Thanks for your help. @iangilman – Siva Kumar S Aug 21 '17 at 13:42
2

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.

Observer
  • 3,506
  • 1
  • 16
  • 32