OpenSeadragon: Open-source Web Viewer & JavaScript Library for High-resolution Large-scale images
The OpenSeadragon is an open source web viewer and JavaScript library for viewing high-resolution large-scale zoomable images. It's required in several industries, as it is already used in many applications for education, science, photography, and marketing.
The OpenSeadragon viewer allows viewing or displaying single or multi-images, zooming, panning, in windowed or full-screen mode. It works for almost all web browsers on Desktop and mobile.
The Web viewer for OpenSeadragon acts as a functional web-based demo for this great library, as the user can supply the remote file location and display the image with highly detailed zooming with full-screen or windowed mode.
Though it has a great value for many sectors, especially medical research, It's lightweight easy to use the library, that comes with viewing tools, different setup and integration options, packed by many plugins, and browsers extensions.
The need for large-scale zoomable image viewer:
In many industries such as medical research and education, there is a demand for such library to zoom into details of high resolution and large scale images, like histology and pathology digital slides. It can be used to scale & zoom into map-tiles for web-based mapping apps, zoom into details of historical photos, Or used to create a virtual web-based exhibition for museums.
OpenSeadragon has been proven in real-world apps for end-users, and in production-ready apps products built by developers from all around the world. Some companies are using it in their web-based products.
Highlights: What makes OpenSeadragon special!
- Pure JavaScript code
- Easy to integrate into web apps or websites.
- Lightweight
- Used by companies, museums, laboratories, research groups, universities, geeks, developers, photographers
- Works smoothly in all modern browsers
Features
- Clear API
- Viewer tools
- Plugins-rich
- Tiles support
- Tooltip
- Toolbar
- Keyboard navigation
- Shortcuts and keybinding
- Multi-Image Features
- Sequence Mode Image Reference Strip Collection Mode Full Multi-Image
- Browser extensions: Google Chrome, Mozilla Firefox
- Multiple building and development options
- Development and debugging tools for developers
- Developer-friendly
- Supports Require.js, Webpack or Browserify.
- Supports virtual slides for Pathology, Histology
Tools
OpenSeadragon as it is used by hundreds of developers around the world, some of them enriched it with plugins, tools, and integration with other JavaScript frameworks.
Built with OpenSeadragon:
Medical & Biology Projects
There are other medical projects built on top of this great library, so as enterprise software and web-based commercial services. OpenSeadragon was included as a core library for several free medical & biology related projects, here is some of them:
Allen Cell Explorer
Allen Cell Explorer uses OpenSeadragon in their web-based Cell explorer for large-scale multilayered 2D and 3D cell images for educational purposes.
Cancer Digital Slide Archive
Cancer: Digital Slide Archive is a web directory for hundreds of pathology slides for cancer cases. It provides a simple web-based viewer to browse through slides, zoom within every slide with no browser-extensions or external software required.
OpenSnapDragon Web Viewer for OpenSlide
OpenSlide is an open source C library that provides a core engine to parse, & read Whole slide images, which is also called (Virtual slides). OpenSlide provides an impressive demo with OpenSeadragon
MicroDraw: Collaborative Annotation
MicroDraw is a web application to visualise and annotate collaboratively high resolution histology data.
Cultural & History-focused Projects
The OpenSeadragon Viewer has been used in powerful, web-based exhibitions and presentations, here are some samples of powerful projects created with OpenSeadragon:
Plugins:
OpenSeadragon have a long list of plugins built to extend it its functionalities and ease its integration with JavaScript frameworks, and different image rendering and manipulation options like WebGL rendering, here is a sample of some useful plugins for developers:
- OpenSeadragonGL allows you to run WebGL shaders on all tiles in OpenSeadragon.
- OpenSeadragonMagnifier allows you to view part of the image magnified in a navigator-like box.
- OpenSeadragonScalebar displays your image's scale in real-world measurements.
- OpenSeadragonScreenshot allows you to make a screenshot of your viewport, with optional magnification.
- SVG Overlay allows you to add SVG elements that pan and zoom with the OpenSeadragon viewer.
- OpenSeadragonDraggableNavigator allows you to make navigator draggable over the OpenSeadragon viewer.
- OpenSeadragonAnnotations allows you to draw in an SVG overlay that scales with the image. Useful to annotate and highlight regions of an image.
Developer's note
OpenSeadragon is a popular project among JavaScript developers on Github, It's forked more than 300 times, and got >1600 stars. It has been used by about 360 developers in their web-based projects so far.
The OpenSeadragon library is available in a compressed file for download that contains the JavaScript files, in Bower Package manager reports, as a package for NPM, and online through free public CDN (Content Delivery Network) as JsDeliver, & CDNJS.
Supported formats
- 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/ Single image mode
Development status
- Active Development
License
- OpenSeadragon is released under the New BSD license.
Conclusion
OpenSeadragon is a production-ready lightweight library, that can benefit web-developers creating a powerful viewer for large-scale image without diving into too many technical problems, creating the viewer from scratch or browsers incompatibility. It comes packed with plugins, browser extensions, and a large community of developers who use this library in their work.
