mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-25 14:46:10 +03:00
Code Issues Projects Releases Wiki Activity
0540e834b4
openseadragon/www/tilesource-iiif.html

250 lines
10 KiB
HTML
Raw Blame History

<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>
Reference in New Issue View Git Blame Copy Permalink