OpenSeadragon 5.0.1

OpenSeadragon

See how people are using OpenSeadragon in the wild.

Examples & Features

• Basics

  • Creating Zooming Images
  • Viewport Coordinates

• 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.

  • Legacy Image Pyramids
  • IIIF (International Image Interoperability Framework)
  • DZI (Deep Zoom Images)
  • OSM (Open Street Maps)
  • TMS (Tiled Map Service)
  • Zoomify
  • Custom Tile Sources
  • Simple Image

  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.

  • GeoTIFFTileSource - view TIFF-compatible files via geotiff.js

• 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.

  • Zoom and Pan
  • Overlays
  • Viewport Navigator
  • Rotation
  • Toolbar
  • Binding Custom Buttons
  • Keyboard Navigation
  • Customize Tooltips (I18n)
  • Crop TiledImage with Polygons

• 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.

  • Sequence Mode
  • Image Reference Strip
  • Collection Mode
  • Full Multi-Image

• Advanced data model in OpenSeadragon with custom TileSource

  From custom caching to client-side generated image data.

  • Advanced data model with TileSource

• Developer Tools

  These settings can be useful for developers who are trying to add features to OpenSeadragon or when troubleshooting.

  • Debug Mode

• Futher Examples

  Refer to this CodePen collection for a variety of examples that might serve as an inspiration for your own projects.

  • OpenSeadragon Recipes

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.
  • 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.
  • 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.
  • 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.

• Tile Source Plugins

  Plugin tile sources enable OpenSeadragon to be used to view image types beyond those supported by the built-in TileSource implementations.

  • 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.

• Icon Packs

  • Flat Blue Icons (CDN)
  • SVG Flat Icons
  • Thin Flat Icons

Browser Extension

OpenSeadragonizer enables viewing any image on a webpage with OpenSeadragon.

• OpenSeadragonizer for Chrome
• OpenSeadragonizer for Firefox

You can also use the web version of OpenSeadragonizer directly without installing anything.

Download & Install

You can get OpenSeadragon 5.0.1 through any of these venues:

• Download: zip or tar.gz
• Bower: bower install openseadragon
• npm: npm install openseadragon (info)
• jsDelivr (CDN): code and images
• CDNJS (CDN): code and images (info)

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.

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.

• Examples & Features
• Plugins
• Browser Extension
• Download & Install
• API Documentation
• Support
• Development
• License