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.
-
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.
-
Advanced data model in OpenSeadragon with custom TileSource
From custom caching to client-side generated image data.
-
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:
-
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.
- OpenSeadragonDraggableNavigator allows you to make navigator draggable over the OpenSeadragon viewer.
- OpenSeadragonFabricjsOverlay allows you to add Fabric.js canvas overlay that pans and zooms with OpenSeadragon viewer.
- OpenSeadragonFiltering allows you to add image filters in OpenSeadragon.
- 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.
- 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.
-
Icon Packs
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 4.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.
-
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.
Support
GitHub: issue tracker
Twitter: @OpenSeadragon
Chat: Discord or Gitter (also accessible via IRC)
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.