2016-10-22 00:28:12 +03:00
<!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 >
2016-11-08 20:27:30 +03:00
Demo of how the loadTilesWithAjax and ajaxHeaders options as well as the getTileHeaders() method on TileSource can be applied.
2016-10-22 00:28:12 +03:00
< / 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.
2017-05-08 18:14:26 +03:00
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}
2016-10-22 00:28:12 +03:00
// 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.
2016-11-08 20:27:30 +03:00
getTileAjaxHeaders: function(level, x, y) {
2016-10-22 00:28:12 +03:00
return {
2017-05-08 18:14:26 +03:00
Range: "bytes " + tileManifest.tileRanges[level][x][y].join("-") + "/" + tileManifest.totalSize
};
2016-10-22 00:28:12 +03:00
},
};
var viewer = OpenSeadragon({
id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/",
showNavigator: true,
loadTilesWithAjax: true,
2016-11-08 20:27:30 +03:00
ajaxHeaders: {
// Example of using the viewer-level ajaxHeaders option
2016-10-22 00:28:12 +03:00
// for providing an authentication token.
2016-12-19 08:39:32 +03:00
"Authentication": "Bearer MY_AUTH_TOKEN"
2016-10-22 00:28:12 +03:00
}
});
viewer.addTiledImage({
// The headers specified here will be combined with those in the Viewer object (if any)
2016-11-08 20:27:30 +03:00
ajaxHeaders: {
2016-12-19 08:39:32 +03:00
"X-My-TiledImage-Header": "Something"
2016-10-22 00:28:12 +03:00
},
tileSource: myCustomTileSource
});
< / script >
< / body >
< / html >
