OpenSeadragon 4.1.1

example: deep zoom image support

The DZI (Deep Zoom Image) format is an XML specification maintained by Microsoft and described here.

OpenSeadragon supports the DZI format via AJAX (XML/JSON), JSONP, and as inline configuration (using the JSON format). The DZI specification does not officially describe a JSON format, but the examples below illustrate how DZI XML is mapped to JSON following some simple conventions.

XMLHTTPRequest for DZI XML or JSON

The DZI format is implied by a tile source specified as a string and which has the .dzi extension. OpenSeadragon sniffs for whether the DZI is formatted as XML or JSON.

Example XMLHTTPRequest for DZI (XML or JSON)

Below is a sample DZI file formatted as XML.

<?xml version="1.0" encoding="UTF-8"?>
<Image xmlns="http://schemas.microsoft.com/deepzoom/2008"
       Format="jpg" 
       Overlap="2" 
       TileSize="256" >
    <Size Height="9221" 
          Width="7026"/>
</Image>

And the equivalent sample DZI file formatted as JSON.

{
    "Image": {
        "xmlns":    "http://schemas.microsoft.com/deepzoom/2008",
        "Format":   "jpg", 
        "Overlap":  "2", 
        "TileSize": "256",
        "Size": {
            "Height": "9221",
            "Width":  "7026"
        }
    }
}

Configuration is done via the tileSources option (or programmatically).

OpenSeadragon({
    ...
    tileSources:   "/example-images/highsmith/highsmith.dzi",
    ...
});

JSONP Request for DZI JSON

The DZI JSONP format is implied by a tile source specified as a string and which has the .js extension. The remainder of the filename is expected to match the JSONP callback.

Example JSONPRequest for DZI JSON

Below is a sample DZI file formatted as JSONP.

highsmith({
    "Image": {
        "xmlns":    "http://schemas.microsoft.com/deepzoom/2008",
        "Format":   "jpg", 
        "Overlap":  "2", 
        "TileSize": "256",
        "Size": {
            "Height": "9221",
            "Width":  "7026"
        }
    }
});

Configuration is done via the tileSources option (or programmatically).

OpenSeadragon({
    ...
    tileSources:   "/example-images/highsmith/highsmith.js",
    ...
});

Inline Configuration for DZI

Inline configuration is convenient as well because it avoids a potentially complicated JSON/XML AJAX request. Just drop the equivalent JSON directly into the tileSources option.

Example Inline Configuration for DZI

Configuration is done via the tileSources option (or programmatically).

Note however the non-standard DZI property url which we must supply explicitly, since this is normally inferred from the path specified for the DZI XML/JSON/JSONP.

OpenSeadragon({
    ...
    tileSources:   {
        Image: {
            xmlns:    "http://schemas.microsoft.com/deepzoom/2008",
            Url:      "/example-images/highsmith/highsmith_files/",
            Format:   "jpg", 
            Overlap:  "2", 
            TileSize: "256",
            Size: {
                Height: "9221",
                Width:  "7026"
            }
        }
    }
    ...
});

Additional Examples

A Very Wide Image