Google Mapsライクなオープンソース高解像度画像ビューアOpenSeadragonを使ってみる

もう読んでそのままです。OpenSeadragonというOSSプロダクトを使います。
スミソニアン博物館の収蔵物画像のビューアにも使われたりします。

OpenSeadragonのサイトをみてみると、トップページにサンプルが設置されてますね。

表示できる画像フォーマットはいくつかあるようですが、巨大な画像をそのまま表示はできません。
今回はDZIフォーマットにした画像で動かそうと思います。

ファイル作成のやり方はDeepZoomファイル形式.DZIをPythonで作成してみるの記事を御覧ください。

ではDZIファイルをhelloworld.dzi、タイルディレクトリをhelloworld_filesとして話をすすめます。
OpenSeadragon本体はサイトからダウンロードしてきてください。
bowerにも対応しているそうなので、環境が整っている方はそれでどうぞ。

ファイルはいくつかありますが、使うのはとりあえず下記2つでいいんじゃないでしょうか。

images/
openseadragon.js

ではhtmlで表示させてみましょう。

<script src="/js/openseadragon.js"></script>

<!-- 画像ビューアを表示させるDIV -->
<div id="contentDiv"></div>

<script type="text/javascript">
    // Example
    OpenSeadragon({
        id:              "contentDiv",
        prefixUrl:       "/images/",
        tileSources:     "/helloworld.dzi"
    });
</script>

以上です。グリグリズームできます。

おつかれさまでした。