Skip to content

Instantly share code, notes, and snippets.

@felixbuenemann

felixbuenemann/openseadragon-imgix-poc.html

Last active October 31, 2019 12:28
Show Gist options
  • Save felixbuenemann/098d3d30d3db78560f1da6b1d2cba64a to your computer and use it in GitHub Desktop.
Save felixbuenemann/098d3d30d3db78560f1da6b1d2cba64a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
openseadragon-imgix-poc.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #openseadragon1 {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="openseadragon1"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.1/openseadragon.min.js"></script>
<script type="text/javascript">
(function(){
var url = location.search.replace(/^\?url=/, '');
if (!url) return;
url = (url.indexOf('?') === -1) ? url + '?' : url + '&';
var imageInfoUrl = url.replace(/&?fm=[^&]+/, '') + 'fm=json';
OpenSeadragon.makeAjaxRequest(imageInfoUrl, function(xhr) {
var response = JSON.parse(xhr.responseText);
var height = response.PixelHeight;
var width = response.PixelWidth;
var maxLevel = Math.ceil(Math.log(Math.max(width, height)) / Math.log(2));
var tileSize = 256;
var tileOverlap = 1;
var viewer = OpenSeadragon({
id: 'openseadragon1',
prefixUrl: 'https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.1/images/',
wrapHorizontal: false,
minZoomImageRatio: 0.0,
maxZoomPixelRatio: 1.0,
tileSources: {
width: width,
height: height,
tileSize: tileSize,
tileOverlap: tileOverlap,
getTileUrl: function(level, x, y) {
var factor = Math.pow(2, Math.abs(level - maxLevel));
var scale = 1.0/factor;
var rectSize = tileSize * factor;
var overlap = tileOverlap * factor;
var offset = rectSize - (overlap * 2);
var rectWidth = x === 0 ? rectSize - overlap : rectSize;
var rectHeight = y === 0 ? rectSize - overlap : rectSize;
return url + ((scale !== 1.0) ? 'w=' + scale + '&h=' + scale + '&' : '') +
'rect=' + (x * offset) + ',' + (y * offset) + ',' + rectWidth + ',' + rectHeight;
}
}
});
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment