簡単なIIIFビューワを作ってみよう（4）: 画像切り出しをしてみよう

IIIF IIIF応用

前回までで、ページめくりからページ指定までできるようになりました。ここまできたら、もう少し色々な機能をつけてみたくなります。そこで、IIIFの面白さの一つとしてよく採り上げられる、画像切り出しをやってみましょう。

画像切り出しプラグインの導入

切り出しをするには、OpenSeadragonのプラグイン、selection.jsを使うと便利です。このプラグインは、切り出し領域を人が手作業で指定するための便利なインターフェイスと、切り出し対象の座標情報を返戻する機能を提供してくれます。

このプラグインでは、javascriptのファイルであるselection.jsとともに、アイコン等の画像も提供しています。ですので、アイコン画像もダウンロードして適切なフォルダ（ディレクトリ）に置いておく必要があります。それを踏まえた上で、ダウンロードしてみましょう。ちなみに、色々検討してみましたが、今のところ一番やりやすそうなのは、githubのページから、zipファイルをダウンロードして、zipファイルを展開してから、必要なファイルを適切なフォルダ（ディレクトリ）にコピーするという方法です。 　このzipファイルをダウンロードして展開すると openseadragonselection-master というフォルダ（ディレクトリ）ができます。この中にdistというフォルダ（ディレクトリ）があり、その中に openseadragonselection.js というファイルがあります。このファイルを jquery-3...min.jsと同じ階層にコピーしましょう。さらに、openseadragonselection-master というフォルダ（ディレクトリ）の中にある images というフォルダの中にある png画像をすべてコピーして、openseadragon-bin-2.4.0 の中のimages の中に（＝他のOpenSeadragonアイコン画像と同じフォルダ（ディレクトリ）に）コピーしておきましょう。

これでダウンロードとファイルの設置は完了しました。次に、とりあえず selection.jsプラグインを読み込ませてみましょう。 まずは、head要素の中で、openseadragon.min.jsの次にこのプラグインを読み込ませるタグを追加します。

    <script src="openseadragon-bin-2.4.0/openseadragon.min.js"></script>
    <script src="openseadragonselection.js"></script>

次に、script要素の一番最後に以下のように selection()を書き込みます。selectionプラグインを読み込んだことで、viewerインスタンスにselectionを使わせることができるようになりました。

   var selection = viewer.selection();
  });
    </script>

これを保存してからGoogle Chromeで開いてみると、以下のように、selectionボタンがビューワ部分に登場し、それをクリックすると画面上で選択操作ができるようになります。 f:id:digitalnagasaki:20190504143616p:plain

ただし、このままですと、selectionしたあとにどうするかということを何も定義していないので、切り出しをしても、その後に何も起きません。切り出した後に何かさせたければ、selectionに少し命令を追加する必要があります。

今回のサンプルはこちらです。

なお、OpenSeadragonには色々なプラグインが提供されています。 公式サイトにリストがあり、多くのものはデモも提供していますので、ご覧になってみて、色々アイデアをふくらませてみるのも面白いかもしれません。

選択した領域の座標情報を取得・表示

画像切り出しをするためには、切り出したい領域の座標情報が必要です。selection.jsプラグインはこれを簡単に取得させてくれますが、とりあえず、この動作のみを確認してみましょう。

    <div id="myViewer" class="openseadragon" style="width:600px;height:600px"></div>
座標情報: <span id="coordx"></span>, <span id="coordy"></span>, <span id="coordw"></span>, <span id="coordh"></span>
    <script>

上記では座標情報を書き込むための要素を用意しておきます。それぞれのspan要素にcoordx, coordy, coordw, coordhのidを付与しておきます。

これらのidに対して、以下のようにして onSelection の値をrectに入れて、それをそれぞれ rect.x, rect.y, rect.width, rect.heightで取り出して書き込みます。

var selection = viewer.selection({
      onSelection: function(rect) {
        $("#coordx").text(rect.x);
        $("#coordy").text(rect.y);
        $("#coordw").text(rect.width);
        $("#coordh").text(rect.height);
      }
});

これで、selection.jsで選択した画像の領域の座標情報が表示されます。この座標の場合は画像上のピクセル情報です。

今回のサンプルはこちらです。

選択した領域を切り出して表示させる

さて、いよいよ切り出して表示をしてみます。切り出した部分の画像上での座標情報が取得できれば、あとはそれをIIIF Image APIに適用することで切り出し画像を表示したり共有したりできます。

今回は、小さな画像を表示させつつフルサイズ画像へのリンクも作成してみたいと思います。わかりやすくするために、書き込む場所を二つ用意します。

    座標情報: <span id="coordx"></span>, <span id="coordy"></span>, <span id="coordw"></span>, <span id="coordh"></span>
    <div id="imgDiaC1"></div>
    <div id="imgDiaC3"></div>
    <script>

つぎに、切り出し座標を基にしてIIIF Image APIのURLを作成します。

カラーの画像をJpeg形式で同じカラーで入手しようとするなら、IIIF Image APIのURLの基本的な構造は以下のようになります。

http://（IIIF Image APIの基本URL）/(切り出し座標)/(画像の表示サイズ)/(画像の回転度)/default.jpg

「IIIF Image APIの基本URL」というのは、IIIF Manifestに含まれるものであり、言い方を換えると、info.jsonを含むURLからinfo.jsonというファイル名を削除したものであるとも言えます。 以前に書いた以下のものを思い出してみてください。

maniJson["sequences"][0]["canvases"][0]["images"][0]["resource"]["service"]["@id"]

「切り出し座標」のところには今回取得した座標情報を記述します。もし切り出しをまったくしない場合には「full」と書いておくことになっています。

「画像の表示サイズ」は表示したい縦横サイズをここに記述します。最大サイズがよいという場合は「full」と書いておくことになっています。

「画像の回転度」は90度右回転であれば90、90度左回転であれば270、と書いておきます。回転させない場合には「0」です。

以上を踏まえつつ、IIIF Image APIのURLを以下のようにして作成してみます。

まずは簡単に概要を説明すると、まずは座標情報をそれぞれ変数に入れてから、前回の座標情報表示用の要素に表示をさせて、 その後に、Image API のURLの画像情報部分を作成し、その後、現在見ているページの画像の info.json のURLをviewerから取得して 末尾のinfo.jsonを削除してから画像情報部分と連結し、最後は二つの要素上でそれぞれ表示させます。

onSelection: function(rect) {
    var rectx = rect.x
    var recty = rect.y
    var rectw = rect.width
    var recth = rect.height
        // 後で扱いやすいように、とりあえず座標情報をそれぞれ変数に入れておきます。
        // これは好みの問題で、変数にいれずにそれぞれ直接以下で使うこともできます。
    $("#coordx").text(rectx);
    $("#coordy").text(recty);
    $("#coordw").text(rectw);
    $("#coordh").text(recth);
        // それぞれの座標表示要素にて座標情報を表示させます。
        var pct = '/'+rectx+','+recty+','+rectw+','+recth+'/200,/0/default.jpg' ;
        var pctf = '/'+rectx+','+recty+','+rectw+','+recth+'/full/0/default.jpg' ;
        // Image APIのURLの画像表示部分を作成します。
        // 表示画像の幅が200のものとフルサイズのものを用意します。
        var currentPage = viewer.currentPage();
         // 現在見ている画像が何枚目かを確認してその値を 変数currentPageに入れます。
        var currentiJsonUri = viewer.tileSources[currentPage].replace(/\/info.json$/,'');
        // viewer.tileSourcesには、現在の資料の画像のinfo.json URLのリストが配列
        // として入っています。currentPageで現在見ている画像のinfo.json URLを
        // 取得した上で、末尾のinfo.jsonを削除しています。その結果は 変数currentiJsonUri
        // に代入します。
        pctf = currentiJsonUri + pctf;
        pct = currentiJsonUri + pct;
        // それぞれの画像表示部分 pct, pctf を画像の基本URLが入っている currentiJsonUri と文字列連結します。
        $("#imgDiaC1").html('<img src="'+pct+'" alt="A part of the image">');
        // 上で作成した切り出し画像のURL（変数pctに入っている）をimgタグに組み込んで id: imgDiaC1 に表示させます。
        // そうすると切り出し画像がWebブラウザ上に表示されます。
        $("#imgDiaC3").text('');
        // こちらは、いったんid: imgDiaC3の内容を空にしてから、
        $("#imgDiaC3").append('<br><a href="'+pct+'">画像部分URL （IIIF対応）</a>');
        $("#imgDiaC3").append('<br><a href="'+pctf+'">画像部分URLフルサイズ （IIIF対応）</a>');
         // 二つのタグを作って追加 (.append)します。これらのタグは、それぞれ切り出し画像のURL
         // にリンクを張っています。
 }

いかがでしょうか。今回のサンプルはこちらです。