OpenSeadragon
An open-source, web-based viewer for
high-resolution zoomable images, implemented in pure JavaScript, for desktop and mobile.
OpenSeadragon Viewer With Default Settings
See how people are using OpenSeadragon in the wild.
Examples & Features
-
Basics
-
Supported Tile Sources
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. (Please help
us add built-in support for your required image serving
protocol.) Each supported protocol aims to allow configuration
via XMLHTTPRequest, JSONP, as well as direct inline configuration.
Generic Tile Sources:
Image APIs:
In addition to the tile sources that are included in the core OpenSeadragon
code, plugins are available that extend the default functionality. These may
depend on external libraries, or can't be included in the main project for
other reasons.
-
Interface Elements and UI Customization
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.
-
Multi-Image Features
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.
-
Data Management and Rendering
From custom data through modification & plugin interaction to client-side generated image data.
-
Migration Guide
Version migration hints.
-
Developer Tools
These settings can be useful for developers who are trying
to add features to OpenSeadragon or when troubleshooting.
-
Futher Examples
Refer to this CodePen collection for a variety of examples that might serve as an inspiration for your own projects.
Plugins
Plugins can be used to enhance OpenSeadragon. The following plugins are currently available. Note that
some rendering-oriented plugins might be only compatible up until v4—see the migration guide.
-
Code Plugins
- OpenSeadragonAnnotations allows you to draw in a SVG overlay that scales with the image. Useful to annotate and highlight regions of an image.
- OpenSeadragonAnnotorious enables creation and display of annotations in W3C Web Annotation format.
- Bookmark URL updates the page URL with the current zoom/pan.
- OpenSeadragonCanvasOverlay allows you to add canvas overlay that pans and zooms with OpenSeadragon viewer.
- OpenSeadragonCanvasOverlayHd OpenSeadragonCanvasOverlayHd allows you to add a canvas overlay that renders nicely on retina displays, pans and zooms with OpenSeadragon viewer, and supports multi-images.
- OpenSeadragonCapture allows you to capture high-quality screenshots from OpenSeadragon viewers with optional overlay layers.
- Doodle allows you to draw graphics on the image. It performs extremely well, able to create 100,000 interactive shapes.
- OpenSeadragonDraggableNavigator allows you to make navigator draggable over the OpenSeadragon viewer.
- OpenSeadragonFabricOverlay is a modern, TypeScript-based Fabric.js overlay for OpenSeadragon that enables interactive annotations, drawing, and shape manipulation. [Compatible with v5+]
- OpenSeadragonFabricjsOverlay allows you to add Fabric.js canvas overlay that pans and zooms with OpenSeadragon viewer.
- OpenSeadragonFilters is a modern, TypeScript-based plugin that adds real-time, WebGL-accelerated image filtering to OpenSeadragon with full type safety. [Compatible with v5+]
- OpenSeadragonFiltering allows you to add image filters in OpenSeadragon. [Not compatible with v5+]
- OpenSeadragonFiltering allows you to add image filters in OpenSeadragon. Not performance-optimal, a better choice is for example the flex-renderer (see below).
- OpenSeadragonGL allows you to run WebGL shaders on all tiles in OpenSeadragon.
- OpenSeadragonGuides allows you to add horizontal and vertical guidelines to the Openseadragon viewer.
- OpenSeadragonHTMLelements allows you to add HTML elements that pan, zoom, rotate and flip with the Openseadragon viewer.
- HTML Overlay is another approach to HTML overlays, creating a zooming space where all of the HTML content inside scales to match the viewer.
- openSeadragonIiifEyes retrieves RGB values for the original coordinates from tiles in a openseadragon/iiif environment.
- OpenSeadragonImagingHelper provides coordinate conversion, pan, and zoom methods in a simplified coordinate system.
- OpenSeadragonJustifiedCollection Openseadragon plugin for arranging collections in a justified grid layout.
- OpenSeadragonMagnifier allows you to view part of the image magnified in a navigator-like box.
- OSDMeasure allows taking measurements from within an OpenSeadragon viewer.
- OpenSeadragonMultiRow adds navigation and options for multi row image sequences.
- OpenSeadragon Opacity Slider 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.
- OpenSeadragonPaperjsOverlay allows you to add Paper.js canvas overlay that pans and zooms with OpenSeadragon viewer.
- OpenSeadragonRGB allows reading the rgb values of image pixels.
- OpenSeadragonScalebar displays your image's scale in real-world measurements.
- OpenSeadragonScreenshot allows you to make a screenshot of your viewport, with optional magnification.
- OpenSeadragonSelection provides functionality for selecting a rectangular part of an image. Useful for cropping.
- OpenSeadragon Selection Plugin select regions of the image by mouse gestures and display them, supports various shapes like rectangle, polygon, or even custom shapes.
- OpenSeadragonSmartScrollZoom detects how fast the user is scrolling the mouse wheel and increases the zoom speed accordingly.
- SVG Overlay allows you to add SVG elements that pan and zoom with the OpenSeadragon viewer.
- OpenSeadragonViewerInputHook provides hooks into an OpenSeadragon.Viewer and/or OpenSeadragon.MouseTracker for overriding/extending the default user-input event handling behavior.
- OpenSeadragonWMTS allows displaying geo-referenced maps served via the WMTS protocol.
- OpenSeadragonZoomLevels allows restricting the image zoom to specific levels.
-
Drawer & Tile Source Plugins
Plugin tile sources enable OpenSeadragon to be used to view image types beyond those
supported by the built-in TileSource implementations. Drawer plugins enable viewing custom data items
or render custom data visualizations.
- GeoTIFFTileSource 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.
- Flex Renderer enables direct on-gpu data visualizations by offering a custom shader API. Supported are also UI controls, so users can directly manipulate what they can see.
A more performant alternative to the
OpenSeadragonFiltering plugin. Last but not least, a vector data rendering is supported introduced in two new tile sources:
MVTTileSource for rendering Map Vector Tiles (MVT),FabricTileSource for rendering simple untiled vector objects in fabricjs-compatible format.
- SZITileSource enables viewing of SZI files - essentially, DZI (Deep Zoom Images) bundled as a single, uncompressed zipfile. Works with local files, files hosted via webservers, or files on S3-compatible object stores (subject to meeting the documented requirements).
-
Icon Packs
-
Plugins compatible up to v5
These plugins are only compatible up to OpenSeadragon 5, using canvas drawer only. There are usually better alternatives available in the lists above.
Browser Extension
OpenSeadragonizer
enables viewing any image on a webpage with OpenSeadragon.
You can also use the web version of OpenSeadragonizer directly without installing anything.
Download & Install
You can get OpenSeadragon 6.0.0 through any of these venues:
For installation instructions, see the Getting Started page in the documentation.
For creating the tiles themselves, see Creating Zooming Images.
Older releases and source archives are
available on GitHub. 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.
-
Types support
Type definitions for OpenSeadragon can be installed from npm.
npm install @types/openseadragon
Note: these are un-official type definitions that are mantained by the DefinitelyTyped community.
API Documentation
Available on our documentation pages. Also see our FAQ.
Learning Course
The official OpenSeadragon course is now live! Taught by Ian Gilman, creator and maintainer, this is your best introduction to working with OpenSeadragon, from basic concepts to coordinate systems, animation, and beyond.
Support
GitHub: issue tracker and discussions
Twitter: @openseadragon
Bluesky: @openseadragon.bsky.social
Chat: Discord
Reddit: r/openseadragon
Stack Overflow: #openseadragon
Also see our FAQ.
Development
OpenSeadragon is
developed on GitHub. You can clone the source repository with
Git by running:
git clone git://github.com/openseadragon/openseadragon
License
OpenSeadragon is released under the New BSD
license.
