OpenSeadragon 4.1.1

example: iiif tile support

The latest version of the International Image Interoperability Framework: Image API is formally described here.

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, 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 designed 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.

OpenSeadragon has added support for IIIF thanks to several of the authors of its specification, as well as the gist provided by Jon Stroop.

Inline Configuration for IIIF Tile Sources

Inline configuration is very straightforward. The tile source type is identified by its profile attribute and must specify the URL of the tile service with the tilesUrl attribute.

Example Inline Configuration for IIIF

In this example we also specified the preserveViewport option to retain the viewport zoom and position when changing pages.

In order to make this feel a little more like a basic book turner, we are adding a useful combination of other options that help to constrain the viewport.

OpenSeadragon({
    ...
    preserveViewport: true,
    visibilityRatio:    1,
    minZoomLevel:       1,
    defaultZoomLevel:   1,
    sequenceMode:       true,
    tileSources:   [{
      "@context": "http://iiif.io/api/image/2/context.json",
      "@id": "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000001.jp2",
      "height": 7200,
      "width": 5233,
      "profile": [ "http://iiif.io/api/image/2/level2.json" ],
      "protocol": "http://iiif.io/api/image",
      "tiles": [{
        "scaleFactors": [ 1, 2, 4, 8, 16, 32 ],
        "width": 1024
      }]
    },
       ...
    ]
    ...
});

XMLHTTPRequest for IIIF info.json

Note: The following example follows the IIIF Image API specification, version 2.0.. The older 1.0 XML and JSON syntaxes and 1.1 JSON syntax are also supported. Also note that the Image Server will need to support cross-origin resource sharing in order for this to work across different domains.

Example XMLHTTPRequest for IIIF info JSON

Below is a sample IIIF info file containing the minimum amount of information to work with OpenSeadragon.

  {
    "@context": "http://iiif.io/api/image/2/context.json",
    "@id": "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000004.jp2",
    "height": 7200,
    "width": 5434,
    "profile": [ "http://iiif.io/api/image/2/level2.json" ],
    "protocol": "http://iiif.io/api/image",
    "tiles": [{
      "scaleFactors": [ 1, 2, 4, 8, 16, 32 ],
      "width": 1024
    }]
  }

OpenSeadragon({
    ...
    sequenceMode: true,
    tileSources: [
        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000001.jp2/info.json",
        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000002.jp2/info.json",
        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000003.jp2/info.json",
        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000004.jp2/info.json",
        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000005.jp2/info.json",
        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000006.jp2/info.json",
        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000007.jp2/info.json"
    ]
    ...
});