OpenSeadragonを使ってみる

　先日公開した”NGC5371とHCG68”の記事は画像をクリックすると単独のビューワーが開くよう記述しています。このビューワーはOpenSeadragonを使って作成しています。

　OpenSeadragonとは高解像度の巨大な画像を簡単に拡大/縮小またパンしながら見ることができるWebベースのビューワーです。オープンソースで開発されており、JavaScriptで記述されています。

　巨大な画像をあらかじめ複数のファイルに分割したタイルソースと呼ばれるイメージプロトコルに対応しています。分割することで、画像の読込や、拡大縮小の高速化を計っているようです。当然、分割していない従来の画像も描画可能です。

　また、ピラミッド表現に対応しており、パンやズームの際にGogoleマップのように平滑化された画像から高精度の画像に変化します。そのほか、UIのカスタマイズやナビゲートビューポートなど機能は盛りだくさんです。

　でも、使い方はとても簡単です。タイルソースとしてDZI（Deep Zoom Image）形式を使う場合、インライン方式で以下のように記述するだけです。（実はインライン以外の方式ではタイルソールの表示に成功していない。）

OpenSeadragon({
    id:    "deepZoom",
    prefixUrl:    "js/openseadragon-bin-2.2.1/images/",
    tileSources:   {
        Image: {
            xmlns:    "http://schemas.microsoft.com/deepzoom/2008",
            Url:      "dzi/NGC5371-20170423_files/",
            Format:   "jpg", 
            Overlap:  "2", 
            TileSize: "128",
            Size: {
                Height: "2420",
                Width:  "3630"
            }
        }
    }
});

　１Mバイト程度の大きさの画像ファイルならタイルソースにしなくてもパフォーマンス的には許容範囲でしょう。オリジナルのファイルをそのまま使う場合は以下の記述になります。

OpenSeadragon({
    id:    "deepZoom",
    prefixUrl:    "js/openseadragon-bin-2.2.1/images/",
    tileSources: {
        type: 'image',
        url:  'NGC/NGC5371-20170423.jpg',
        buildPyramid: false
    }
});

　これをHTMLに組み込むだけでビューワーの完成です。

  ......
  <div id="deepZoom" style="background-color:black;
                                           width:960px;
                                           height:640px;">
  </div>
  <script src="js/openseadragon-bin-2.2.1/openseadragon.min.js">
  </script>
  <script type="text/javascript">
        var viewer = OpenSeadragon({
                                   ....
                                   ....
        });
  </script> 
  ......