<!DOCTYPE html>
<html>
<head>
<title>OpenSeadragon Custom Request Headers Demo</title>
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
<style type="text/css">
.osd-viewer {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<p>
Demo of how the loadTilesWithAjax and ajaxHeaders options as well as the getTileHeaders() method on TileSource can be applied.
</p>
<p>
Examine the network requests in your browser developer tools to see the custom headers sent with each request.
</p>
<div id="contentDiv" class="osd-viewer"></div>
<script type="text/javascript">
// These values are generated by a script that concatenates all the tile files and records
// their byte ranges in a multi-dimensional array.
var tileManifest = {"tileRanges":[[[[0,3467]]],[[[3467,6954]]],[[[344916,348425]]],[[[348425,351948]]],[[[351948,355576]]],[[[355576,359520]]],[[[359520,364663]]],[[[364663,374196]]],[[[374196,407307]]],[[[407307,435465],[435465,463663]],[[463663,491839],[491839,520078]]],[[[6954,29582],[29582,50315],[50315,71936],[71936,92703]],[[92703,113385],[113385,133265],[133265,154763],[154763,175710]],[[175710,197306],[197306,218807],[218807,242177],[242177,263007]],[[263007,283790],[283790,304822],[304822,325691],[325691,344916]]]],"totalSize":520078}
// This tile source demonstrates how you can retrieve individual tiles from a single file
// using the Range header.
var myCustomTileSource = {
width: 1000,
height: 1000,
tileWidth: 254,
tileHeight: 254,
tileOverlap: 1,
maxLevel: 10,
minLevel: 0,
// The tile URL is always the same. Only the Range header changes
getTileUrl: function () {
return "/test/data/testpattern.blob";
},
// This method will send the appropriate range header for this tile based on the data
// in tileByteRanges.
getTileAjaxHeaders: function(level, x, y) {
return {
Range: "bytes=" + tileManifest.tileRanges[level][x][y].join("-") + "/" + tileManifest.totalSize
};
},
};
var viewer = OpenSeadragon({
id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/",
showNavigator: true,
loadTilesWithAjax: true,
ajaxHeaders: {
// Example of using the viewer-level ajaxHeaders option
// for providing an authentication token.
"Authentication": "Bearer MY_AUTH_TOKEN"
}
});
viewer.addTiledImage({
// The headers specified here will be combined with those in the Viewer object (if any)
ajaxHeaders: {
"X-My-TiledImage-Header": "Something"
},
tileSource: myCustomTileSource
});
</script>
</body>
</html>