如何在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

如果您想显示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。

Answer 2

原来的大小，你的意思是你想要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