OpenSeadragon has no external dependencies. To install, download and copy the
openseadragon folder into your web root or static files directory, add it to your page, and create a viewer with new OpenSeadragon.Viewer(options) or
OpenSeadragon(options) for short.
Here is an example of basic usage:
You will, of course, need zooming image data to work with. See Creating Zooming Images.
For more information on the options object you pass in to
OpenSeadragon(), see OpenSeadragon.Options. To learn more about the viewer that it creates, see OpenSeadragon.Viewer. For programmatic control of zoom and pan, see OpenSeadragon.Viewport.
For other advanced topics, see our Examples & Features pages.
If you are working directly from the file system (accessing your web page from
file:///path/to/your/file.htm) you may need to change your browser's local files security policy so that your zooming image data can be loaded. Alternatively, you can run a local server. You can find help on both methods in three.js documentation.
Important note for Angular users
By default Angular enables change detection in all imported code, which introduces a lot of CPU load in UI intensive libraries. To avoid this, you must create
Openseadragon object out of NgZone. Instead of
const viewer = OpenSeadragon(options);
const viewer = this.ngZone.runOutsideAngular(() => OpenSeadragon(options) );
More info in the Angular documentation.