openseadragonで元の画像サイズを表示する方法は？

Question

私はangle4アプリケーションでopenseadragonズームプラグインを実装しようとしています。

私はhomeFillsViewer : trueを使用する場合は、画像がある

const viewer = OpenSeadragon({ 
      id     : 'seadragon-viewer', 
      prefixUrl   : '//openseadragon.github.io/openseadragon/images/', 
      tileSources  : this.primaryPicture.hiResInformation, 
      showFullPageControl: false, 
      showNavigator  : true, 
      homeFillsViewer : false, 
     }); 

、私は以下のように使用している場合openseadragonは、画像サイズを制限し、中央に画像を設定して、すべてが働いているが、私は元の画像サイズを表示することができないことができますdivにフィットしますが、画像はトリミングされた画像のように適切ではありません。

画像の元のサイズを表示したい。

解決策があれば、事前におねがいします。

Answer 1

あなたがDZIイメージのため実際のサイズのコンテナを表示したい場合 - あなたのコンテナは、元画像のサイズと同じ大きさを持つ必要があります。あなたは、高解像度の画面用window.devicePixelRatioを使用する必要が

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"); 
}); 

：あなたはこのコードを使用することができますすることができません。

Answer 2

元のサイズでは、画像のピクセルと画面のピクセルとの間に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