-
Notifications
You must be signed in to change notification settings - Fork 0
/
test_stitch.html
117 lines (105 loc) · 3 KB
/
test_stitch.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Zoomable - generated by zoomable.ca</title>
<script type="text/xml" id="hdvxmlembed">
<?xml version="1.0"?>
<root>
<imageset
url="test_stitch_files/{l}/{c}_{r}.jpg"
levels="13"
width="2901"
height="1939"
projection="perspective"
alphaBlend="1"
maxZoom="2.000000"
tileWidth="254"
tileHeight="254"
tileOverlap="1"
/>
</root>
</script>
<style>
body {
background-color: #333;
}
html,
body,
#openseadragon1 {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#credit {
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
position: absolute;
bottom: 10px;
right: 10px;
z-index: 999;
}
#credit a {
clear: both;
display: block;
color: #fff;
text-decoration: none;
}
</style>
</head>
<body style="margin: 0; height:100%">
<div id="openseadragon1"><div id="credit"><a href="http://www.zoomable.ca" target="_blank">zoomable.ca</a></div></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://openseadragon.github.io/openseadragon/openseadragon.js'></script>
<script>
// Set up viewer size
var viewerWidth = '100%';
var viewerHeight = '100%';
if(viewerWidth.search('%') == -1) {
$('#openseadragon1').width(viewerWidth + 'px').height(viewerHeight + 'px');
}
// Set up DZI information
var dziData = $('#hdvxmlembed').html().trim();
dziData = $($.parseXML(dziData));
url = dziData.find('imageset').attr('url');
var dziFilesUrl = (url.match(/(.*?)_stitch_files/g))[0] + '/';
var dziBasename = dziFilesUrl.replace('_files/', '');
// This converts the XML into a DZI tile source specification object that OpenSeadragon understands.
var tileSourceFromData = function(data, filesUrl) {
$xml = data;
var $image = $xml.find('imageset');
var $size = $image;
var dzi = {
Image: {
xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
Url: filesUrl,
Format: 'jpg',
Overlap: $image.attr('tileOverlap'),
TileSize: $image.attr('tileWidth'),
Size: {
Height: $size.attr('height'),
Width: $size.attr('width')
}
}
};
return dzi;
};
// This creates the actual viewer. Depending on the file protocol (file or http), it loads the tiles locally or from the XML file.
if(location.protocol == 'file:') {
var viewer = OpenSeadragon({
id: 'openseadragon1',
prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
tileSources: tileSourceFromData(dziData, dziFilesUrl)
});
}else{
var viewer = OpenSeadragon({
id: 'openseadragon1',
prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
tileSources: dziBasename + '.xml'
});
}
</script>
</body>
</html>