如何在openseadragon中显示原始图像大小？

Question

我正在尝试在我的 angular4 应用程序中实现 openseadragon 缩放插件。

一切正常，但我无法显示原始图像大小，openseadragon 限制图像大小并将图像设置在中心，如果我使用如下所示，

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

如果我使用homeFillsViewer : true，则图像适合 div，但图像不像裁剪图像那样正确。

我想显示图片的原始尺寸。

任何解决方案都会有所帮助，在此先感谢您。

Answer 1

您的原始尺寸是指您希望图像中的像素与屏幕上的像素之间存在 1 对 1 的对应关系？要确定缩放比例，您必须将查看器的大小与图像的大小进行比较并适当地缩放。像这样的：

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);
});

它正在运行：https://codepen.io/iangilman/pen/RZxEWZ

Answer 2

如果您想显示 dzi 图像的真实尺寸容器 - 您的容器应该具有与源图像尺寸相同的尺寸。为此，您可以使用以下代码：

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");
});

对于高分辨率屏幕，您需要使用 window.devicePixelRatio。