無料で図書館システムを作ってみよう　2017年10月

Image Composite Editorを利用して作成したZoomSiteのデータをjavascriptのみで動くOpenSeaDragonで動かすための覚書

ICE（Image Composite Editor）は、複数の画像を合成して１枚の画像にしてくれるソフトで、
絵図とかのアーカイブ化に力を発揮してくれそうなヤツです。
スキャナが理想ですが、コンデジで複数の分割撮影でも結構綺麗な形になったりします。
ICEを使う時に注意するのは、糊しろ（画像の重なり合う部分）を、10～20％は確保しておくこと。
とくにスキャナだと綺麗に分割できるんですが、あえて重なる部分を用意します。
でないときれいにくっつきません。

Microsoftからリリースされているフリーソフトということでも、安心感がある？？気がします。
くっつけて１枚の画像にしてしましまうのも出来るのですが、
ZoomSiteという、よくアーカイブサイトである画像の拡大縮小できるページみたいなのが、
簡単に作れる機能もついてます。

こいつで作ってくれるZoomSiteファイルの使い方がいまいち、どう使ってよいのかわからなかったので、
その覚書、です。

１．用意するもの
ICEでZoomSiteを作った際に出来る
○[ファイル名].xml
○[ファイル名]_filesフォルダ

○Opemseadragonで配布されているopenseadragon.min.jsファイルとimagesフォルダ

ICEは
https://www.microsoft.com/en-us/research/product/computational-photography-applications/image-composite-editor/
からダウンロードできる。
使い方はほぼAUTOでいい（というかAUTOでくっつかないときれいにならないです）。

OpenSeeDragonは
https://openseadragon.github.io/
からzip形式でダウンロード。いらないファイルは捨てていい。

２．表示用のHTMLファイルを作成する。
必要なのは以下の部分で、tileSourcesに[ファイル名].xmlファイルを指定する。


<div id="example-xmlhttprequest-for-dzi"  class="openseadragon">
        <script type="text/javascript">
            OpenSeadragon({
                id:            "example-xmlhttprequest-for-dzi",
                prefixUrl:     "openseadragon/images/",
                tileSources:   [ "[ファイル名].xml"]
            });
        </script>
</div>

注意点：[ファイル名]部分は共通でないといけないので、必ずそろえること。


 <html>
 <head>
     <meta charset='utf-8'>
 <title>テストの表示 </title>
 <script src="openseadragon/openseadragon.min.js"> </script>
 </head>
 <body>
 <h1>テストの表示 </h1>
 <div>
テストテストテスト
 </div>
     <div id="example-xmlhttprequest-for-dzi" class="openseadragon">
         <script type="text/javascript">
            OpenSeadragon({
                id:            "example-xmlhttprequest-for-dzi",
                prefixUrl:     "openseadragon/images/",
                tileSources:   [
                    "[ファイル名].xml"
                ]
            });
         </script>
 </div>
 </script>
 </body> </html>

で普通に動く。
取りあえずは、すべて同じフォルダ内に配置する場合ってことで。

三枚の画像は（三つを並べて表示してます）

こんな感じで、ICEで1枚にすると下の感じ。*180度回転してます。

で、OpenSeeDragonを使うと
http://wemfls.web.fc2.com/iceacv/test.html
な感じ。

このくらいは、フリーソフトの組み合わせで出来る。

スポンサーサイト

Pagetop

home

Pagetop