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

我想在我的angular4应用程序中实现openseadragon缩放插件。如何在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，但图像不适合像裁剪图像。

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

任何解决方案将是有益的，谢谢你提前。

来源

2017-08-16 Shiva Kumar S

如果你想显示破天图像真实大小的容器 - 你的容器应具有相同的尺寸为源图像尺寸。要做到这一点，您可以使用此代码：

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-17 18:39:35 Observer

这也是一个很好的答案;取决于你想要完成的事情。 – iangilman

这似乎适用于我，但问题是图像对齐到容器的左侧，但我需要在中心。 –

尝试在上面的代码中添加其他样式：style =“text-align：center;”。另外，请使用谷歌如何把图像放在中心 – Observer

通过原始大小，你的意思是你想在图像中的像素和屏幕上的像素之间的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-17 16:54:17 iangilman

原始尺寸意味着像高度：1300和宽度：1200应该在相同尺寸的查看器中显示的图像大小，但是当前查看器将所有图像限制为特定尺寸而不考虑原始尺寸 –

好吧，然后我想我们正在谈论同样的事情。这段代码应该可以做到。请注意，您仍然需要平移。 – iangilman

这似乎没有为我工作。如果工作正常，我会尽力找出问题并发布解决方案。感谢您的帮助。 @iangilman –

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

回答

相关问题