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

您所说的原始尺寸是指您希望图像中的像素与屏幕上的像素一一对应吗？要确定缩放比例，您必须将查看器的大小与图像的大小进行比较并适当缩放。像这样:

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