2

我正在尝试在我的 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 但图像不像裁剪图像那样正确。

我想显示图像的原始大小。

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

4

2 回答 2

3

原始大小是指您希望图像中的像素与屏幕上的像素之间存在 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

于 2017-08-17T16:54:17.207 回答
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 用于高分辨率屏幕。

于 2017-08-17T18:39:35.687 回答