如何在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中顯示原始圖像大小？

回答

相關問題