前回までで、ページめくりからページ指定までできるようになりました。ここまできたら、もう少し色々な機能をつけてみたくなります。そこで、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ボタンがビューワ部分に登場し、それをクリックすると画面上で選択操作ができるようになります。
ただし、このままですと、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' ;
var currentPage = viewer.currentPage();
var currentiJsonUri = viewer.tileSources[currentPage].replace(/\/info.json$/,'');
pctf = currentiJsonUri + pctf;
pct = currentiJsonUri + pct;
$("#imgDiaC1").html('<img src="'+pct+'" alt="A part of the image">');
$("#imgDiaC3").text('');
$("#imgDiaC3").append('<br><a href="'+pct+'">画像部分URL （IIIF対応）</a>');
$("#imgDiaC3").append('<br><a href="'+pctf+'">画像部分URLフルサイズ （IIIF対応）</a>');
}
いかがでしょうか。今回のサンプルはこちらです。
