mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 05:06:09 +03:00
77 lines
3.1 KiB
HTML
77 lines
3.1 KiB
HTML
<!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 ajaxRequestHeaders 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.
|
|
const 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.
|
|
getTileHeaders: function(level, x, y) {
|
|
return {
|
|
Range: "bytes=" + tileManifest.tileRanges[level][x][y].join("-") + "/" + tileManifest.totalSize
|
|
}
|
|
},
|
|
};
|
|
|
|
var viewer = OpenSeadragon({
|
|
// debugMode: true,
|
|
id: "contentDiv",
|
|
prefixUrl: "../../build/openseadragon/images/",
|
|
showNavigator: true,
|
|
loadTilesWithAjax: true,
|
|
ajaxRequestHeaders: {
|
|
// Example of using the viewer-level ajaxRequestHeaders 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)
|
|
ajaxRequestHeaders: {
|
|
"X-My-TileSource-Header": "Something"
|
|
},
|
|
tileSource: myCustomTileSource
|
|
});
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|