-
Notifications
You must be signed in to change notification settings - Fork 25
/
Copy pathindex.html
444 lines (411 loc) · 22.3 KB
/
index.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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="shortcut icon" type="image/png" href="/images/logo16.png">
<title>OpenSeadragon</title>
<link rel='stylesheet'
type='text/css'
media='screen'
href='/css/style.css'/>
<script src="/openseadragon/openseadragon.min.js"></script>
</head>
<body>
<a href="https://github.com/openseadragon/openseadragon"><img
style="position: absolute; top: 0; right: 0; border: 0;"
src="/images/forkme_right_darkblue_121621.png"
alt="Fork me on GitHub" /></a>
<div id="container">
<div class="download">
<a href="https://github.com/openseadragon/openseadragon/releases/download/v5.0.1/openseadragon-bin-5.0.1.zip">
<img border="0" width="90" src="/images/zip.png"></a>
<a href="https://github.com/openseadragon/openseadragon/releases/download/v5.0.1/openseadragon-bin-5.0.1.tar.gz">
<img border="0" width="90" src="/images/tar.png"></a>
</div>
<img class="logo" src="/images/logo.png">
<h1>
<a href="/">OpenSeadragon</a><span class="version">
5.0.1
</span>
<span class="tagline">
</span>
</h1>
<div class='navigation'>
<ul>
<li><a href='/#examples-and-features'
>Examples & Features</a></li>
<li><a href='/#plugins'
>Plugins</a></li>
<li><a href='/#browser-extension'
>Browser Extension</a></li>
<li><a href='/#download'
>Download & Install</a></li>
<li><a href='/docs/'
>API Documentation</a></li>
<li><a href='/#support'
>Support</a></li>
<li><a href='/#development'
>Development</a></li>
<li><a href='/#license'
>License</a></li>
</ul>
</div>
<h2>OpenSeadragon</h2>
<div class="elevator">
An open-source, web-based viewer for <strong>high-resolution zoomable images</strong>, implemented in pure JavaScript, for desktop and mobile.
<a class="opencollective" href="https://opencollective.com/openseadragon/donate" target="_blank">
<img src="https://opencollective.com/openseadragon/donate/[email protected]?color=blue" width=250 />
</a>
</div>
<div class="demoarea">
<div class="demoheading">
OpenSeadragon Viewer With Default Settings
<span id='consolelog'></span>
</div>
<div id="contentDiv" class="openseadragon front-page"></div>
<div class="image-credit">Image © 2012, <a href="https://www.flickr.com/photos/projectese/" target="_blank">Dario Morelli</a></div>
</div>
<script type="text/javascript">
// Example
OpenSeadragon({
id: "contentDiv",
prefixUrl: "/openseadragon/images/",
tileSources: "/example-images/duomo/duomo.dzi"
});
</script>
<p>See how people are using <a href="/examples/in-the-wild/">OpenSeadragon in the wild</a>.</p>
<h2 id='examples-and-features'>
Examples & Features
</h2>
<ul>
<li>
<h3>Basics</h3>
<ul>
<li><a href="/examples/creating-zooming-images/">Creating Zooming Images</a></li>
<li><a href="/examples/viewport-coordinates/">Viewport Coordinates</a></li>
</ul>
</li>
<li>
<h3>Supported Tile Sources</h3>
<p>
OpenSeadragon supports several image serving protocols out of
the box and is actively adding support for more. If the image
serving protocol you need is not supported, you can always
add support for yours using a custom tile source. <em>(Please help
us add built-in support for your required image serving
protocol.)</em> Each supported protocol aims to allow configuration
via XMLHTTPRequest, JSONP, as well as direct inline configuration.
</p>
<ul>
<li><a href='/examples/tilesource-legacy/'>
<span>Legacy Image Pyramids</span>
</a></li>
<li><a href='/examples/tilesource-iiif/'>
<span>IIIF (International Image Interoperability Framework)</span>
</a></li>
<li><a href='/examples/tilesource-dzi/'>
<span>DZI (Deep Zoom Images)</span>
</a></li>
<li><a href='/examples/tilesource-osm/'>
<span>OSM (Open Street Maps)</span>
</a></li>
<li><a href='/examples/tilesource-tms/'>
<span>TMS (Tiled Map Service)</span>
</a></li>
<li><a href='/examples/tilesource-zoomify/'>
<span>Zoomify</span>
</a></li>
<li><a href='/examples/tilesource-custom/'>
<span>Custom Tile Sources</span>
</a></li>
<!-- <li><a href='/examples/tilesource-zoomit/'>
<span>Pulling from Zoom.it</span>
</a></li> -->
<li><a href='/examples/tilesource-image/'>
<span>Simple Image</span>
</a></li>
</ul>
<p>
In addition to the tile sources that are included in the core OpenSeadragon
code, <a href="#plugin-tilesources">plugins are available</a> that extend the default functionality. These may
depend on external libraries, or can't be included in the main project for
other reasons.
</p>
<ul>
<li>
<a href="https://pearcetm.github.io/GeoTIFFTileSource/demo/demo.html">
GeoTIFFTileSource - view TIFF-compatible files via geotiff.js
</a>
</li>
</ul>
</li>
<li>
<h3>Interface Elements and UI Customization</h3>
<p>
OpenSeadragon provides many optional interface elements which
can be easily enabled via simple configuration settings.
Additionally, OpenSeadragon aims to enable you to bind its
controls to entirely custom interfaces.
</p>
<ul>
<li><a href='/examples/ui-zoom-and-pan/'>
<span>Zoom and Pan</span>
</a></li>
<li><a href='/examples/ui-overlays/'>
<span>Overlays</span>
</a></li>
<li><a href='/examples/ui-viewport-navigator/'>
<span>Viewport Navigator</span>
</a></li>
<li><a href='/examples/ui-rotation/'>
<span>Rotation</span>
</a></li>
<li><a href='/examples/ui-toolbar/'>
<span>Toolbar</span>
</a></li>
<li><a href='/examples/ui-binding-custom-buttons/'>
<span>Binding Custom Buttons</span>
</a></li>
<li><a href='/examples/ui-keyboard-navigation/'>
<span>Keyboard Navigation</span>
</a></li>
<li><a href='/examples/ui-customize-tooltips/'>
<span>Customize Tooltips (I18n)</span>
</a></li>
<li><a href='/examples/ui-tiledimage-polygon-cropping/'>
<span>Crop TiledImage with Polygons</span>
</a></li>
</ul>
</li>
<li>
<h3>Multi-Image Features</h3>
<p>It's very common that sets of related images are required to be presented in a way that allows a user to easily navigate through them. OpenSeadragon provides simple options for this, as well as full multi-image support with complete control.</p>
<ul>
<li><a href='/examples/tilesource-sequence/'>
<span>Sequence Mode</span>
</a></li>
<li><a href='/examples/ui-reference-strip/'>
<span>Image Reference Strip</span>
</a></li>
<li><a href='/examples/tilesource-collection/'>
<span>Collection Mode</span>
</a></li>
<li><a href='/examples/multi-image/'>
<span>Full Multi-Image</span>
</a></li>
</ul>
</li>
<li>
<h3>Advanced data model in OpenSeadragon with custom TileSource</h3>
<p>
From custom caching to client-side generated image data.
</p>
<ul>
<li><a href='/examples/advanced-data-model/'>
<span>Advanced data model with TileSource</span>
</a></li>
</ul>
</li>
<li>
<h3>Developer Tools</h3>
<p>
These settings can be useful for developers who are trying
to add features to OpenSeadragon or when troubleshooting.
</p>
<ul>
<li><a href='/examples/developer-debug-mode/'>
<span>Debug Mode</span>
</a></li>
</ul>
</li>
<li>
<h3>Futher Examples</h3>
<p>
Refer to this CodePen collection for a variety of examples that might serve as an inspiration for your own projects.
</p>
<ul>
<li><a href='https://codepen.io/collection/APoyjJ/'>
<span>OpenSeadragon Recipes</span>
</a></li>
</ul>
</li>
</ul>
<h2 id='plugins'>Plugins</h2>
<p>Plugins can be used to enhance OpenSeadragon. The following plugins are currently available:</p>
<ul>
<li>
<h3>Code Plugins</h3>
<ul class="square-list">
<li><a href="https://github.com/Emigre/openseadragon-annotations">OpenSeadragonAnnotations</a> allows you to draw in a SVG overlay that scales with the image. Useful to annotate and highlight regions of an image.</li>
<li><a href="https://github.com/recogito/annotorious-openseadragon">OpenSeadragonAnnotorious</a> enables creation and display of annotations in W3C Web Annotation format.</li>
<li><a href="https://github.com/openseadragon/bookmark-url">Bookmark URL</a> updates the page URL with the current zoom/pan.</li>
<li><a href="https://github.com/altert/OpenSeadragonCanvasOverlay">OpenSeadragonCanvasOverlay</a> allows you to add canvas overlay that pans and zooms with OpenSeadragon viewer.</li>
<li><a href="https://github.com/joshua-gould/OpenSeadragonCanvasOverlayHd">OpenSeadragonCanvasOverlayHd</a> OpenSeadragonCanvasOverlayHd</a> allows you to add a canvas overlay that renders nicely on retina displays, pans and zooms with OpenSeadragon viewer, and supports multi-images.</li>
<li><a href="https://github.com/harshalitalele/OpenSeadragonDraggableNavigator/">OpenSeadragonDraggableNavigator</a> allows you to make navigator draggable over the OpenSeadragon viewer.</li>
<li><a href="https://github.com/altert/OpenseadragonFabricjsOverlay">OpenSeadragonFabricjsOverlay</a> allows you to add Fabric.js canvas overlay that pans and zooms with OpenSeadragon viewer.</li>
<li><a href="https://github.com/usnistgov/OpenSeadragonFiltering">OpenSeadragonFiltering</a> allows you to add image filters in OpenSeadragon.</li>
<li><a href="https://github.com/thejohnhoffer/viaWebGL">OpenSeadragonGL</a> allows you to run WebGL shaders on all tiles in OpenSeadragon.</li>
<li><a href="https://github.com/picturae/OpenSeadragonGuides">OpenSeadragonGuides</a> allows you to add horizontal and vertical guidelines to the Openseadragon viewer.</li>
<li><a href="https://github.com/antonioxdias/OpenSeadragonHTMLelements">OpenSeadragonHTMLelements</a> allows you to add HTML elements that pan, zoom, rotate and flip with the Openseadragon viewer.</li>
<li><a href="https://github.com/openseadragon/html-overlay">HTML Overlay</a> is another approach to HTML overlays, creating a zooming space where all of the HTML content inside scales to match the viewer.</li>
<li><a href="https://github.com/picturae/openSeadragonIiifEyes">openSeadragonIiifEyes</a> retrieves RGB values for the original coordinates from tiles in a openseadragon/iiif environment.</li>
<li><a href="https://github.com/openseadragon-imaging/openseadragon-imaginghelper">OpenSeadragonImagingHelper</a> provides coordinate conversion, pan, and zoom methods in a simplified coordinate system.</li>
<li><a href="https://github.com/Pin0/openseadragon-justified-collection">OpenSeadragonJustifiedCollection</a> Openseadragon plugin for arranging collections in a justified grid layout.</li>
<li><a href="https://github.com/picturae/OpenSeadragonMagnifier">OpenSeadragonMagnifier</a> allows you to view part of the image magnified in a navigator-like box.</li>
<li><a href="https://github.com/verrochi92/OSDMeasure">OSDMeasure</a> allows taking measurements from within an OpenSeadragon viewer.</li>
<li><a href="https://github.com/MartinPluta/OpenSeadragonMultiRow">OpenSeadragonMultiRow</a> adds navigation and options for multi row image sequences.</li>
<li><a href="https://github.com/WasMachenSachen/openseadragon-opacity-slider">OpenSeadragon Opacity Slider</a> adds the functionality to adjust the transparency in the GUI, as well as to adjust their order. This can be useful for comparing different maps of the same place, satellite-imagery with different recording dates, images of art captured with different techniques.</li>
<li><a href="https://github.com/eriksjolund/OpenSeadragonPaperjsOverlay">OpenSeadragonPaperjsOverlay</a> allows you to add Paper.js canvas overlay that pans and zooms with OpenSeadragon viewer.</li>
<li><a href="https://github.com/picturae/openseadragonrgb">OpenSeadragonRGB</a> allows reading the rgb values of image pixels.</li>
<li><a href="https://github.com/usnistgov/OpenSeadragonScalebar">OpenSeadragonScalebar</a> displays your image's scale in real-world measurements.</li>
<li><a href="https://github.com/KTGLeiden/Openseadragon-screenshot">OpenSeadragonScreenshot</a> allows you to make a screenshot of your viewport, with optional magnification.</li>
<li><a href="https://github.com/picturae/openseadragonselection">OpenSeadragonSelection</a> provides functionality for selecting a rectangular part of an image. Useful for cropping.</li>
<li><a href="https://github.com/tuvia-r/openseadragon-select-plugin">OpenSeadragon Selection Plugin</a> select regions of the image by mouse gestures and display them, supports various shapes like rectangle, polygon, or even custom shapes.</li>
<li><a href="https://github.com/Deprecator16/OpenSeadragonSmartScrollZoom">OpenSeadragonSmartScrollZoom</a> detects how fast the user is scrolling the mouse wheel and increases the zoom speed accordingly.</li>
<li><a href="https://github.com/openseadragon/svg-overlay">SVG Overlay</a> allows you to add SVG elements that pan and zoom with the OpenSeadragon viewer.</li>
<li><a href="https://github.com/openseadragon-imaging/openseadragon-viewerinputhook">OpenSeadragonViewerInputHook</a> provides hooks into an OpenSeadragon.Viewer and/or OpenSeadragon.MouseTracker for overriding/extending the default user-input event handling behavior.</li>
<li><a href="https://github.com/recogito/openseadragon-wmts">OpenSeadragonWMTS</a> allows displaying geo-referenced maps served via the WMTS protocol.</li>
<li><a href="https://github.com/picturae/OpenSeadragonZoomLevels">OpenSeadragonZoomLevels</a> allows restricting the image zoom to specific levels.</li>
</ul>
</li>
<li>
<h3 id="plugin-tilesources">Tile Source Plugins</h3>
<p>
Plugin tile sources enable OpenSeadragon to be used to view image types beyond those
supported by the built-in TileSource implementations.
</p>
<ul class="square-list">
<li><a href="https://github.com/pearcetm/GeoTIFFTileSource">GeoTIFFTileSource</a> enables direct viewing of TIFF-compatible files, including Aperio SVS and other formats, directly - no converters needed. This can be used to view local files or on web, without requiring a webserver.</li>
</ul>
</li>
<li>
<h3>Icon Packs</h3>
<ul class="square-list">
<li><a href="https://github.com/Benomrans/openseadragon-icons">Flat Blue Icons</a> (<a href="https://cdn.jsdelivr.net/gh/Benomrans/openseadragon-icons@main/images/">CDN</a>)</li>
<li><a href="https://gitlab.com/tombrossman/openseadragon-svg-icons/">SVG Flat Icons</a></li>
<li><a href="https://github.com/peterthomet/openseadragon-flat-toolbar-icons">Thin Flat Icons</a></li>
</ul>
</li>
</ul>
<h2 id='browser-extension'>Browser Extension</h2>
<p>
<a href="https://github.com/openseadragon/browser-extension">OpenSeadragonizer</a>
enables viewing any image on a webpage with OpenSeadragon.
</p>
<ul class="square-list">
<li>
<a href="https://chrome.google.com/webstore/detail/openseadragonizer/lbjfeiidhldnfohmhnnnjgcmgjbnibgd">
OpenSeadragonizer for Chrome
</a>
</li>
<li>
<a href="https://addons.mozilla.org/en-US/firefox/addon/openseadragonizer/">
OpenSeadragonizer for Firefox
</a>
</li>
</ul>
<p>
You can also use the <a href="openseadragonizer">web version of OpenSeadragonizer</a> directly without installing anything.
</p>
<a name="installing"></a>
<h2 id='download'>Download & Install</h2>
<p>
You can get OpenSeadragon 5.0.1 through any of these venues:
</p>
<ul class="square-list">
<li>
<strong>Download:</strong>
<a href="https://github.com/openseadragon/openseadragon/releases/download/v5.0.1/openseadragon-bin-5.0.1.zip">zip</a> or
<a href="https://github.com/openseadragon/openseadragon/releases/download/v5.0.1/openseadragon-bin-5.0.1.tar.gz">tar.gz</a>
</li>
<li>
<strong>Bower:</strong> <tt>bower install openseadragon</tt>
</li>
<li>
<strong>npm:</strong> <tt>npm install openseadragon</tt> (<a href="https://www.npmjs.com/package/openseadragon">info</a>)
</li>
<li>
<strong>jsDelivr (CDN):</strong> <a href="https://cdn.jsdelivr.net/npm/[email protected]/build/openseadragon/openseadragon.min.js">code</a> and <a href="https://cdn.jsdelivr.net/npm/[email protected]/build/openseadragon/images/">images</a>
</li>
<li>
<strong>CDNJS (CDN):</strong> <a href="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/5.0.1/openseadragon.min.js">code</a> and <a href="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/5.0.1/images/">images</a> (<a href="https://cdnjs.com/libraries/openseadragon">info</a>)
</li>
</ul>
<p>
For installation instructions, see the <a href="/docs/">Getting Started</a> page in the documentation.
</p>
<p>
For creating the tiles themselves, see <a href="/examples/creating-zooming-images/">Creating Zooming Images</a>.
</p>
<p>
Older releases and source archives are
<a href="https://github.com/openseadragon/openseadragon/releases">
available on GitHub</a>. The last version to support IE11 is 4.1.0. The last version to support IE8-10 is 2.4.2. Otherwise, we generally support the active versions of the major browsers.
</p>
<ul>
<li>
<h3 id="types">Types support</h3>
<p>
Type definitions for OpenSeadragon can be installed from <a href="https://www.npmjs.com/package/@types/openseadragon">npm</a>.
<p>
<pre>npm install @types/openseadragon</pre>
</p>
<p>
Note: these are un-official type definitions that are mantained by the <a href="https://github.com/DefinitelyTyped/DefinitelyTyped">DefinitelyTyped</a> community.
</p>
</p>
</li>
</ul>
<h2 id='api-documentation'>API Documentation</h2>
<p>Available on our <a href="/docs/">documentation pages</a>. Also see our <a href="https://github.com/openseadragon/openseadragon/wiki/FAQ">FAQ</a>.</p>
<h2 id='support'>Support</h2>
<p>GitHub: <a href="https://github.com/openseadragon/openseadragon/issues">issue tracker</a> and <a href="https://github.com/openseadragon/openseadragon/discussions">discussions</a></p>
<p>Twitter: <a href="https://twitter.com/openseadragon">@openseadragon</a></p>
<p>Bluesky: <a href="https://bsky.app/profile/openseadragon.bsky.social">@openseadragon.bsky.social</a></p>
<p>Chat: <a href="https://discord.gg/Ygwap8UrGC">Discord</a><!-- or <a href="https://gitter.im/openseadragon/openseadragon">Gitter</a>--></p>
<p>Reddit: <a href="https://www.reddit.com/r/openseadragon/">r/openseadragon</a></p>
<p>Stack Overflow: <a href="https://stackoverflow.com/questions/tagged/openseadragon">#openseadragon</a></p>
<p>Also see our <a href="https://github.com/openseadragon/openseadragon/wiki/FAQ">FAQ</a>.</p>
<!-- <p>IRC: #openseadragon on irc.freenode.net (<a href="irc://irc.freenode.net/#openseadragon">launch on desktop</a> or <a href="http://webchat.freenode.net/?channels=openseadragon">chat in the browser</a>)</p> -->
<h2 id='development'>Development</h2>
<p>
OpenSeadragon is
<a href="https://github.com/openseadragon/openseadragon">
developed on GitHub</a>. You can clone the source repository with
<a href="http://git-scm.com/">Git</a> by running:
<pre>git clone git://github.com/openseadragon/openseadragon</pre>
</p>
<h2 id='license'>License</h2>
<p>
OpenSeadragon is released under the <a href='/license/'>New BSD</a>
license.
</p>
<ul class="footer">
<li><a href='/#examples-and-features'
>Examples & Features</a></li>
<li><a href='/#plugins'
>Plugins</a></li>
<li><a href='/#browser-extension'
>Browser Extension</a></li>
<li><a href='/#download'
>Download & Install</a></li>
<li><a href='/docs/'
>API Documentation</a></li>
<li><a href='/#support'
>Support</a></li>
<li><a href='/#development'
>Development</a></li>
<li><a href='/license/'
>License</a></li>
</ul>
</div>
<script> // Google Analytics
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-40891712-1', 'github.io');
ga('send', 'pageview');
</script>
</body>
</html>