openseadragon/www/tilesource-iiif.html

<h2>
    example: iiif tiles support
</h2>
<p>
    The International Image Interoperability Format is described formally here 
    <a href='http://library.stanford.edu/iiif/image-api/'
        >http://library.stanford.edu/iiif/image-api/</a>.
</p>
<p>
    The IIIF API specifies a web service that returns an image in response to a standard http or https request. 
    The URL can specify the region, size, rotation, quality characteristics and format of the requested image. A 
    URL can also be constructed to request basic technical information about the image to support client 
    applications.  The IIIF API was conceived of to facilitate systematic reuse of image resources in digital 
    image repositories maintained by cultural heritage organizations. The API could be adopted by any image 
    repository or service, and can be used to retrieve static images in response to a properly constructed URL.
</p>
<p>
    OpenSeadragon has added support for IIIF thanks to several of its specifications authors
    as well as the gist provided by <a href='http://github.com/jstroop'>Jon Stroop</a> at 
    <a href='https://gist.github.com/jpstroop/4624253'>this gist</a>.
</p>


<div class="description">
    <h3>Inline Configuration for IIIF tile sources.</h3>
    <p>
        Inline configuration is very straight forward.  The tile source type is
        identified by it's <strong>profile</strong> attribute an must specify the 
        url of the tile service with the <strong>tilesUrl</strong> attribute.
    </p>
</div>
<div class="demoarea">
    <div class="demoheading">
        Example Inline Configuration for IIIF
    </div>
    <div id="example-inline-configuration-for-iiif" 
         class="openseadragon">
    </div>
    <p>
        In this example we also specified the 'preserveViewport' option to retain the 
        viewport zoom and position when changing pages.

    </p>
    <p>
       In order to make this feel just a little more like a basic book turner, we are
       adding a useful combination of other options that help to constrain the viewport.
    </p>
<pre>
OpenSeadragon({
    ...
    preserveViewport: true,
    visibilityRatio:    1,
    minZoomLevel:       1,
    defaultZoomLevel:   1,
    tileSources:   [{
        "identifier":   "pudl0001/4609321/s42/00000001",   
        "width":        2617,   
        "height":       3600,   
        "scale_factors": [1, 2, 3, 4, 5],   
        "tile_width":   256,   
        "tile_height":  256,   
        "formats":      [ "jpg", "png" ],   
        "qualities":    ["native", "bitonal", "grey", "color"],   
        "profile":      "http://library.stanford.edu/iiif/image-api/compliance.html#level1",
        "image_host":   "http://img.princeton.edu/loris"
    }...,{

    ...//more tile sources

    }]
    ...
});</pre>
</div>
<script type="text/javascript">
    OpenSeadragon({
        id:                 "example-inline-configuration-for-iiif",
        prefixUrl:          "/openseadragon/images/",
        preserveViewport:   true,
        visibilityRatio:    1,
        minZoomLevel:       1,
        defaultZoomLevel:   1,
        tileSources:   [{
            "image_host":     "http://img.princeton.edu/loris",
            "identifier":   "pudl0001/4609321/s42/00000001",   
            "width":        2617,   
            "height":       3600,   
            "scale_factors": [1, 2, 3, 4, 5],   
            "tile_width":   256,   
            "tile_height":  256,   
            "formats":      [ "jpg", "png" ],   
            "qualities":    ["native", "bitonal", "grey", "color"],   
            "profile":      "http://library.stanford.edu/iiif/image-api/compliance.html#level1"
        },{
            "image_host":     "http://img.princeton.edu/loris",
            "identifier":   "pudl0001/4609321/s42/00000002",   
            "width":        2547,   
            "height":       3600,   
            "scale_factors": [1, 2, 3, 4, 5],   
            "tile_width":   256,   
            "tile_height":  256,   
            "formats":      [ "jpg", "png" ],   
            "qualities":    ["native", "bitonal", "grey", "color"],   
            "profile":      "http://library.stanford.edu/iiif/image-api/compliance.html#level1"
        },{
            "image_host":     "http://img.princeton.edu/loris",
            "identifier":   "pudl0001/4609321/s42/00000003",   
            "width":        2694,   
            "height":       3600,   
            "scale_factors": [1, 2, 3, 4, 5],   
            "tile_width":   256,   
            "tile_height":  256,   
            "formats":      [ "jpg", "png" ],   
            "qualities":    ["native", "bitonal", "grey", "color"],   
            "profile":      "http://library.stanford.edu/iiif/image-api/compliance.html#level1"
        },{
            "image_host":     "http://img.princeton.edu/loris",
            "identifier":   "pudl0001/4609321/s42/00000004",   
            "width":        2717,   
            "height":       3600,   
            "scale_factors": [1, 2, 3, 4, 5],   
            "tile_width":   256,   
            "tile_height":  256,   
            "formats":      [ "jpg", "png" ],   
            "qualities":    ["native", "bitonal", "grey", "color"],   
            "profile":      "http://library.stanford.edu/iiif/image-api/compliance.html#level1"
        },{
            "image_host":     "http://img.princeton.edu/loris",
            "identifier":   "pudl0001/4609321/s42/00000005",   
            "width":        2694,   
            "height":       3600,   
            "scale_factors": [1, 2, 3, 4, 5],   
            "tile_width":   256,   
            "tile_height":  256,   
            "formats":      [ "jpg", "png" ],   
            "qualities":    ["native", "bitonal", "grey", "color"],   
            "profile":      "http://library.stanford.edu/iiif/image-api/compliance.html#level1"
        },{
            "image_host":     "http://img.princeton.edu/loris",
            "identifier":   "pudl0001/4609321/s42/00000006",   
            "width":        2717,   
            "height":       3600,   
            "scale_factors": [1, 2, 3, 4, 5],   
            "tile_width":   256,   
            "tile_height":  256,   
            "formats":      [ "jpg", "png" ],   
            "qualities":    ["native", "bitonal", "grey", "color"],   
            "profile":      "http://library.stanford.edu/iiif/image-api/compliance.html#level1"
        },{
            "image_host":     "http://img.princeton.edu/loris",
            "identifier":   "pudl0001/4609321/s42/00000007",   
            "width":        2694,   
            "height":       3600,   
            "scale_factors": [1, 2, 3, 4, 5],   
            "tile_width":   256,   
            "tile_height":  256,   
            "formats":      [ "jpg", "png" ],   
            "qualities":    ["native", "bitonal", "grey", "color"],   
            "profile":      "http://library.stanford.edu/iiif/image-api/compliance.html#level1"
        }]
    });
</script>

<div class="description">
    <h3>XMLHTTPRequest for IIIF info.xml or info.json</h3>
    <p>
        The following example info.json and info.xml documents are non-normative and include
        a property <strong>image_host</strong> which allows the info.json and info.xml
        to be hosted from a different server than the images are served from.
    </p>
</div>
<div class="demoarea">
    <div class="demoheading">
        Example XMLHTTPRequest for IIIF info ( XML or JSON )
    </div>
    <div id="example-xmlhttprequest-for-info-xml" 
         class="openseadragon">
        <script type="text/javascript">
            OpenSeadragon({
                id:            "example-xmlhttprequest-for-info-xml",
                prefixUrl:     "/openseadragon/images/",
                tileSources:   [
                    "/openseadragon/examples/images/loris/pudl0001/4609321/s42/00000003/info.json",
                    "/openseadragon/examples/images/loris/pudl0001/4609321/s42/00000004/info.xml"
                ]
            });
        </script>
        <noscript>
            <p>Deep zoom is not available unless javascript is enabled.</p>
            <img src='../images/highsmith/01967v.jpg'
                 height='600'/>
        </noscript>
    </div>
    <p>
        Below is a sample IIIF info file formatted as XML.
    </p>
<pre>
&lt;?xml version="1.0" encoding="UTF-8"?>
&lt;info xmlns="http://library.stanford.edu/iiif/image-api/ns/">
    &lt;identifier>pudl0001/4609321/s42/00000004&lt;/identifier>
    &lt;width>2717&lt;/width>
    &lt;height>3600&lt;/height>
    &lt;scale_factors>
        &lt;scale_factor>1&lt;/scale_factor>
        &lt;scale_factor>2&lt;/scale_factor>
        &lt;scale_factor>3&lt;/scale_factor>
        &lt;scale_factor>4&lt;/scale_factor>
        &lt;scale_factor>5&lt;/scale_factor>
    &lt;/scale_factors>
    &lt;tile_width>256&lt;/tile_width>
    &lt;tile_height>256&lt;/tile_height>
    &lt;formats>
        &lt;format>jpg&lt;/format>
        &lt;format>png&lt;/format>
    &lt;/formats>
    &lt;qualities>
        &lt;quality>native&lt;/quality>
        &lt;quality>bitonal&lt;/quality>
        &lt;quality>grey&lt;/quality>
        &lt;quality>color&lt;/quality>
    &lt;/qualities>
    &lt;profile>http://library.stanford.edu/iiif/image-api/compliance.html#level1&lt;/profile>
    &lt;image_host>http://img.princeton.edu/loris&lt;/image_host>
&lt;/info></pre>
    <p>
        And the equivalent sample IIIF info file formatted as JSON.
    </p>
<pre>
{  
    "identifier" : "pudl0001/4609321/s42/00000003",
    "width":        2694,   
    "height":       3600,   
    "scale_factors" : [1, 2, 3, 4, 5],   
    "tile_width" : 256,   
    "tile_height" : 256,   
    "formats" : [ "jpg", "png" ],   
    "qualities" : ["native", "bitonal", "grey", "color"],   
    "profile" : "http://library.stanford.edu/iiif/image-api/compliance.html#level1",
    "image_host": "http://img.princeton.edu/loris"
}</pre>
<pre>
OpenSeadragon({
    ...
    tileSources:   [
        "/openseadragon/examples/images/loris/pudl0001/4609321/s42/00000003/info.json",
        "/openseadragon/examples/images/loris/pudl0001/4609321/s42/00000004/info.xml"
    ],
    ...
});</pre>
</div>