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进行高分辨率屏幕。

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

2 个答案: