Image Annotatorの使い方

Image Annotatorの機能はどのサイトでも利用できます。必要なのはツールのファイルの他、OpenSeadragonAnnotoriousです。


Any site can use the functions of Image Annotator, which requires OpenSeadragon and Annotorious.

This test page was valid until 2017. Please visite new example page as reference URIs were changed since 2018.


The following is the head element of this page. Please download files with hyperlink from this site, along with OpenSeadragon and Annotorious. You can put those files anywhere in your site. Image path option for OpenSeadragon (prefixUrl) should be defined in Mia.prep_osd.osdoption within imgannot.js (button icons for Annotorious should be placed there).

<link rel="stylesheet" href="/lib/js/annot/annotorious.css" />
<link rel="stylesheet" href="/works/2016/pub/imgannot.css" />
<script src="/lib/js/osd/openseadragon.js"></script>
<script src="/lib/js/annot/annotorious.min.js"></script>
<script src="/lib/js/my/annotext.js"></script>
<script src="/lib/js/my/webannotorious.js"></script>
<script src="/works/2016/pub/imgannot.js"></script>

body要素内にはid="openseadragon"を設定したdiv要素を配置します。この要素ロード後にMia.setup()を実行すると、URIのクエリパラメータ u で与えたマニフェスト/Web Annotation/画像URIの内容を表示します。

Place div element with id="openseadragon" in anywhere within body element. Mia.setup() will display manifest / web annotation / images given by u parameter.

<body onload="Mia.setup();">
<div id="openseadragon"></div>




URI with fragment id (p + page number, e.g. #p8) will make that page displayed initially (try an example to display "Oracula of Leo the Wise, Bodleian MS. Barocci 170").

#openseadragon element can be placed among any other element. Since tool-generated sections (e.g. document information and page index) are attached based on the parent of #openseadragon, it will be safe to wrap #openseadragon up in a container so as to prevent generated sections from interfering other elements. Document label will be displayed in the h1 element if present, otherwise the tool will generate an h1 node. You can customize imgannot.css as needed.

※If you want to try A/V extension, put avannot.js into the same directory as imgannot.js. It will be automatically loaded when any canvas has an A/V file.