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

Answer 2

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

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 中显示原始图像大小？

How to display original image size in openseadragon?

openseadragon

angular