6 ms·

OpenSeadragon: A pure JavaScript high-resolution zoomable image viewer

114 points by arunc 11y ago

PlzSnow 11y ago
On my Macbook the swipe to zoom in/out works beautifully well.
jrochkind1 11y ago
A pretty nifty (if I do say so myself) project I implemented with OpenSeadragon. http://beehivecollective.org/posterViewer/?poster=mr http://beehivecollective.org/posterViewer/?poster=mr I am NOT responsible for the art or narrative, just for putting it online with an OpenSeadragon-based implementation. Source: https://github.com/jrochkind/beehive_poster_viewer https://github.com/jrochkind/beehive_poster_viewer The Mesoamerica Resiste poster is an incredibly large high-res image, and OpenSeadragon works well for allowing very high-res zoom-in, with quick initial load. I had to fight with OSD a bit to get the UI I wanted, but once I spelunked through the source a bit I could usually figure out how to hook in to do what I needed. (And Javascript is not my most fluent language, which perhaps shows in my source). I'm pretty happy with OSD. Still a couple things that aren't quite right in my implementation, it gets confusing to figure out what's going on with high-res images and maintaining proper resolution (also not in my wheelhouse), and the version of OSD I was using didn't neccesarily always do the right thing with high-res "retina" displays (there were some improvements to this in master, not sure if they've been released yet). But overall, OSD is pretty amazingly high quality software, for free. http://beehivecollective.org/posterViewer/?poster=mr#s=An%20Alternative%20Economy%3A%20Exchange http://beehivecollective.org/posterViewer/?poster=mr#s=An%20...
- hawleyal 11y ago
  Nice. However, the animation/easing when selecting next/previous causes some eye strain. Maybe it's just me.
  - jrochkind1 11y ago
    Thanks for the feedback. Yeah, I think it could be better. I had a lot of trouble getting it right, and it required hacking with OpenSeadragon a bit to adjust from the default easing, which was meant for applying to user-drag actions not automated pan-and-zoom, and was definitely inappropriate by default. Do you have any suggestions as to what characterstics of the animation/easing are causing eye strain or what sorts of changes would result in better?
    - 324239042390 11y ago
      I think that its too slow. Also, to prevent the eye focusing on things as they rush past, I would zoom out to view (most of) the poster and then zoom back in to the new detail.
      - jrochkind1 11y ago
        Cool, thanks for the advice. It's tricky to figure out good algorithms for moving from any arbitrary view to any other, with easing and timing etc. Sometimes the pan/zoom is just moving a little bit, in those cases zooming all the way out and back in again would be wrong. So you've got to take all of that into account with some good heuristics in an algorithm. Tricky, but also kind of fun, I'll take another go at it sometime.
nkuttler 11y ago
Very interesting, and quite impressive. I've used iipsrv in the past https://github.com/ruven/iipsrv https://github.com/ruven/iipsrv http://iipimage.sourceforge.net/ http://iipimage.sourceforge.net/
- iangilman 11y ago
  FYI, I believe it is possible to use OpenSeadragon on the front-end and IIPImage on the backend, since they both support IIIF.
Intermernet 11y ago
Love the mouse-wheel scrolling! Very nice :-) Unfortunately, I was thinking it was going to be a crowd-sourced version of a sea-launched space vehicle... https://en.wikipedia.org/wiki/Sea_Dragon_(rocket) https://en.wikipedia.org/wiki/Sea_Dragon_(rocket) Ah well, this is pretty awesome too.
giancarlostoro 11y ago
I think this is amazing, I wish more services would adopt this. I hate when I'm on Amazon or Newegg and I'm zoomed in just enough to where I can read things, but as I drag my way around an image it has to re-render it numerous times (even if I "go back" to a spot). I guess Amazon and Newegg are attributing for bandwidth wasted loading an entire image that may not be looked at? Not sure. Still love this.
ygra 11y ago
One thing I did with a friend back when XKCD 1110 came out: http://dump.ventero.de/xkcd1110/open.html http://dump.ventero.de/xkcd1110/open.html IMHO Seadragon feels much nicer and fluid compared to the host of Leaflet-based viewers that appeared on that day. But maybe I'm biased because I was involved in this viewer ;)
loftux_ 11y ago
We have built a Java based tile generator with OpenSeaDragon Zoomable viewer integration. You can have a look here. https://loftux.com/en/blog/announcing-the-zoomable-image-viewer-for-alfresco#sthash.XswkBIy3.dpbs https://loftux.com/en/blog/announcing-the-zoomable-image-vie... Some examples below. Envisat Radar Image of Netherlands, European Space Agency (8346 x 8525) - https://loftux.nu/share/s/zN6D_rbTT2GgAs4Ih4onHA https://loftux.nu/share/s/zN6D_rbTT2GgAs4Ih4onHA Mountain View in High Resolution - Markus Spiske (2912 x 4368) - https://loftux.nu/share/s/c7V-c8zXRti_crqaTz_OJw https://loftux.nu/share/s/c7V-c8zXRti_crqaTz_OJw KTM Motorcycle - Markus Spiske (2912 x 4368) - https://loftux.nu/share/s/UXgpPaEZSYOe22qTtukWJQ https://loftux.nu/share/s/UXgpPaEZSYOe22qTtukWJQ Xmas Tools - Markus Spiske (4368 x 2912) - https://loftux.nu/share/s/YSO4OsW4Sbux8OASRLPf7A https://loftux.nu/share/s/YSO4OsW4Sbux8OASRLPf7A Horse Eye - Markus Spiske (4368 x 2912) - https://loftux.nu/share/s/qCBsbvgkT3eIcsmSepHwYA https://loftux.nu/share/s/qCBsbvgkT3eIcsmSepHwYA Hurricane Isabel - National Aeronautics and Space Administration (NASA) (11600 x 8800) - https://loftux.nu/share/s/ntxyIcfhS1OoZimvlJn69Q https://loftux.nu/share/s/ntxyIcfhS1OoZimvlJn69Q 360 Degree Panorama of the Southern Sky - European Southern Observatory (ESO)/H.H. Meyer (15204 x 4620) - https://loftux.nu/share/s/UE8ldF3rRN2TjthaTVhL_w https://loftux.nu/share/s/UE8ldF3rRN2TjthaTVhL_w When resolution becomes Counter Productive - Lies Through a Lens (3337 x 5000) - https://loftux.nu/share/s/KAVzW5HcS_ixdsmmk1tvnw https://loftux.nu/share/s/KAVzW5HcS_ixdsmmk1tvnw PIA16568 - First Drilling Target of Curiosity Rover - Jet Propulsion Laboratory/NASA (12858 x 6312) - https://loftux.nu/share/s/PzaaDz10T9-wRru7rcxSeA https://loftux.nu/share/s/PzaaDz10T9-wRru7rcxSeA USS Vulcan (Engineering Drawing) (17600 × 13600) - https://loftux.nu/share/s/Kx9pmszJT6GyX7sdn-4hDw https://loftux.nu/share/s/Kx9pmszJT6GyX7sdn-4hDw
kevincox 11y ago
Really nice. The only thing I would change is to remove the "smooth" drag. It just makes it feel like it is lagging behind. Just stick it to my mouse.
- hawleyal 11y ago
  The smooth drag reduces eye strain caused by animating/easing a detailed image with low FPS.
alistproducer2 11y ago
That is some impressive JS. Well written and organized.
carlodelmundo 11y ago
Can anyone provide any insight on how OpenSeadragon is blazingly fast? Compare this to websites that have to rerender pixelated zoomed-in views after each zoom command.
- ygra 11y ago
  At its core it's just a quadtree of tiles, just like any other such application. This means that the data to transmit or keep in memory is just proportional to what fits on the screen. Furthermore, Seadragon employs animations to bridge perceptible performance gaps, e.g. loading new tiles. You get the blurry mess when zooming in as well, it gets slowly replaced by the sharper versions as new tiles get loaded. The use of the fading animation here helps mask the actual change, which makes it less visually jarring. Another thing is that zooming uses a bit of inertia for the animation, with an easing effect. This takes much longer than Google Maps' or Leaflet's immediate zoom but (a) again, reduces the effect that the new frame upon interaction is totally different from the previous, and (b) during the animation new tiles are loaded already and replaced. This often means that by the time the zoom animation ends you already have the sharper tiles on your screen and the blurry ones were used predominantly during the animation during which you didn't notice the blurryness. Panning also uses a spring to have some sort of easing for drags which means things are animated longer, thus more time for tiles to load without you noticing. Some people dislike that behaviour, I actually like it. It feels less "stiff" than what other tile-based viewers usually do. In general, it's not blazingly fast, or at least not faster than other technologies. It just makes good use of animations and a few perceptual tricks to make it feel fast. Which is actually, what user-facing applications should concentrate much more, in my opinion. Raw performance matters much less than what users perceive (for interactive things anyway).
  - iangilman 11y ago
    Well put!
  - jrochkind1 11y ago
    thanks for this!
stasm 11y ago
A similar project created by the National Library of Poland: https://github.com/Polona/malakh https://github.com/Polona/malakh Example: http://polona.pl/item/8214762/2/ http://polona.pl/item/8214762/2/
- iangilman 11y ago
  Nice! Looking at the code, it seems that it's a very old version of OpenSeadragon, back when it was just called Seadragon. It's still looking good, so perhaps they've been adding their own extensions to it. Thanks for pointing to it!
orless 11y ago
This looks nice, but my question is, why not LeafletJS or OL3? What are the unique features?
- iangilman 11y ago
  All three are great projects! As @jrochkind1 pointed out, the key difference is that OpenSeadragon is oriented around non-map imagery whereas both Leaflet and OpenLayers are focused on maps. This leads to a number of subtle (and not-so-subtle) differences. One key point is that OpenSeadragon allows you to set the zoom level precisely where you want it without rounding to the nearest tile level. Leaflet is getting this feature (they call it fractional zoom) in 1.0, but it's not released yet and it's been missing for a long time. If you are presenting a painting, for instance, and you want the contents to fill the available space on the page, this feature is essential. Probably the biggest difference (as far as I'm aware) is that OpenSeadragon allows you to lay out and animate hundreds of high-resolution images in the same zoomable scene. For some examples of that in action, see: http://blog.iangilman.com/2015/05/openseadragon-20-forest-to-tree-zooming.html http://blog.iangilman.com/2015/05/openseadragon-20-forest-to...
- punnerud 11y ago
  I was thinking the same. And LeafletJS have HW-acceleration for iPhone and a lot of other features.
- jrochkind1 11y ago
  I actually wasn't previously familiar with Leaflet, but when I look at it's demo's now, I generally find it's UI not quite as good as OpenSeadragon's. Another commenter below agrees with me. It also looks like Leaflet may be focused on geographic data? OSD is not, it has no special geo features (which would be a problem if you need them), but is focused on _images_, which may end up giving it the sort of features (back-end and UI) and API suitable for people concered with high-res images as images, rather than maps. (Does Leaflet actually have facility for dealing with multi-resolution-level tiling? I would assume so, but it's not clear from a quick skim of the docs...) Or it could just be that there are multiple products with overlapping feature sets. I don't think OpenSeadragon is neccesarily _newer_ than Leaflet, as I think you imply. Looks like the first commit in Leaflet repo is Aug 2010; the first commit in OpenSeadragon is Nov 2011. I imagine both took a while to reach maturity. It's also worth pointing out that OpenSeadragon is the open source continutation of an originally proprietary Microsoft product. I'd say they were both developed relatively simulataneously, neither one was developed after a mature competitor already existed. It does seem from this thread that OpenSeadragon was news to many people who already knew about Leaflet, so I guess Leaflet is better known? A year ago when I was looking for an open JS tiling image viewer, I found OpenSeadragon, and somehow didn't even come accross leaflet!
Mieroels 11y ago
Openslide has a nice demo using OpenSeadragon. The histological slides can easily be > 100,000 pixels in width and height http://openslide.org/demo/ http://openslide.org/demo/
jeremytubbs 11y ago
We use OpenSeadragon for our collection pages at: http://collection.imamuseum.org/ http://collection.imamuseum.org/ We use have a Python tile_generator: https://github.com/IMAmuseum/tile_generator https://github.com/IMAmuseum/tile_generator Also, I just developed a PHP composer package: https://github.com/jeremytubbs/deepzoom https://github.com/jeremytubbs/deepzoom
- iangilman 11y ago
  Wow, beautiful integration! Great content, too :-)

114 points by arunc 11y ago

On my Macbook the swipe to zoom in/out works beautifully well.

A pretty nifty (if I do say so myself) project I implemented with OpenSeadragon. http://beehivecollective.org/posterViewer/?poster=mr http://beehivecollective.org/posterViewer/?poster=mr I am NOT responsible for the art or narrative, just for putting it online with an OpenSeadragon-based implementation. Source: https://github.com/jrochkind/beehive_poster_viewer https://github.com/jrochkind/beehive_poster_viewer The Mesoamerica Resiste poster is an incredibly large high-res image, and OpenSeadragon works well for allowing very high-res zoom-in, with quick initial load. I had to fight with OSD a bit to get the UI I wanted, but once I spelunked through the source a bit I could usually figure out how to hook in to do what I needed. (And Javascript is not my most fluent language, which perhaps shows in my source). I'm pretty happy with OSD. Still a couple things that aren't quite right in my implementation, it gets confusing to figure out what's going on with high-res images and maintaining proper resolution (also not in my wheelhouse), and the version of OSD I was using didn't neccesarily always do the right thing with high-res "retina" displays (there were some improvements to this in master, not sure if they've been released yet). But overall, OSD is pretty amazingly high quality software, for free. http://beehivecollective.org/posterViewer/?poster=mr#s=An%20Alternative%20Economy%3A%20Exchange http://beehivecollective.org/posterViewer/?poster=mr#s=An%20...

hawleyal 11y ago
Nice. However, the animation/easing when selecting next/previous causes some eye strain. Maybe it's just me.
- jrochkind1 11y ago
  Thanks for the feedback. Yeah, I think it could be better. I had a lot of trouble getting it right, and it required hacking with OpenSeadragon a bit to adjust from the default easing, which was meant for applying to user-drag actions not automated pan-and-zoom, and was definitely inappropriate by default. Do you have any suggestions as to what characterstics of the animation/easing are causing eye strain or what sorts of changes would result in better?
  - 324239042390 11y ago
    I think that its too slow. Also, to prevent the eye focusing on things as they rush past, I would zoom out to view (most of) the poster and then zoom back in to the new detail.
    - jrochkind1 11y ago
      Cool, thanks for the advice. It's tricky to figure out good algorithms for moving from any arbitrary view to any other, with easing and timing etc. Sometimes the pan/zoom is just moving a little bit, in those cases zooming all the way out and back in again would be wrong. So you've got to take all of that into account with some good heuristics in an algorithm. Tricky, but also kind of fun, I'll take another go at it sometime.

nkuttler 11y ago

Very interesting, and quite impressive. I've used iipsrv in the past https://github.com/ruven/iipsrv https://github.com/ruven/iipsrv http://iipimage.sourceforge.net/ http://iipimage.sourceforge.net/

iangilman 11y ago
FYI, I believe it is possible to use OpenSeadragon on the front-end and IIPImage on the backend, since they both support IIIF.

Intermernet 11y ago

Love the mouse-wheel scrolling! Very nice :-) Unfortunately, I was thinking it was going to be a crowd-sourced version of a sea-launched space vehicle... https://en.wikipedia.org/wiki/Sea_Dragon_(rocket) https://en.wikipedia.org/wiki/Sea_Dragon_(rocket) Ah well, this is pretty awesome too.

giancarlostoro 11y ago

I think this is amazing, I wish more services would adopt this. I hate when I'm on Amazon or Newegg and I'm zoomed in just enough to where I can read things, but as I drag my way around an image it has to re-render it numerous times (even if I "go back" to a spot). I guess Amazon and Newegg are attributing for bandwidth wasted loading an entire image that may not be looked at? Not sure. Still love this.

ygra 11y ago

One thing I did with a friend back when XKCD 1110 came out: http://dump.ventero.de/xkcd1110/open.html http://dump.ventero.de/xkcd1110/open.html IMHO Seadragon feels much nicer and fluid compared to the host of Leaflet-based viewers that appeared on that day. But maybe I'm biased because I was involved in this viewer ;)

loftux_ 11y ago

We have built a Java based tile generator with OpenSeaDragon Zoomable viewer integration. You can have a look here. https://loftux.com/en/blog/announcing-the-zoomable-image-viewer-for-alfresco#sthash.XswkBIy3.dpbs https://loftux.com/en/blog/announcing-the-zoomable-image-vie... Some examples below. Envisat Radar Image of Netherlands, European Space Agency (8346 x 8525) - https://loftux.nu/share/s/zN6D_rbTT2GgAs4Ih4onHA https://loftux.nu/share/s/zN6D_rbTT2GgAs4Ih4onHA Mountain View in High Resolution - Markus Spiske (2912 x 4368) - https://loftux.nu/share/s/c7V-c8zXRti_crqaTz_OJw https://loftux.nu/share/s/c7V-c8zXRti_crqaTz_OJw KTM Motorcycle - Markus Spiske (2912 x 4368) - https://loftux.nu/share/s/UXgpPaEZSYOe22qTtukWJQ https://loftux.nu/share/s/UXgpPaEZSYOe22qTtukWJQ Xmas Tools - Markus Spiske (4368 x 2912) - https://loftux.nu/share/s/YSO4OsW4Sbux8OASRLPf7A https://loftux.nu/share/s/YSO4OsW4Sbux8OASRLPf7A Horse Eye - Markus Spiske (4368 x 2912) - https://loftux.nu/share/s/qCBsbvgkT3eIcsmSepHwYA https://loftux.nu/share/s/qCBsbvgkT3eIcsmSepHwYA Hurricane Isabel - National Aeronautics and Space Administration (NASA) (11600 x 8800) - https://loftux.nu/share/s/ntxyIcfhS1OoZimvlJn69Q https://loftux.nu/share/s/ntxyIcfhS1OoZimvlJn69Q 360 Degree Panorama of the Southern Sky - European Southern Observatory (ESO)/H.H. Meyer (15204 x 4620) - https://loftux.nu/share/s/UE8ldF3rRN2TjthaTVhL_w https://loftux.nu/share/s/UE8ldF3rRN2TjthaTVhL_w When resolution becomes Counter Productive - Lies Through a Lens (3337 x 5000) - https://loftux.nu/share/s/KAVzW5HcS_ixdsmmk1tvnw https://loftux.nu/share/s/KAVzW5HcS_ixdsmmk1tvnw PIA16568 - First Drilling Target of Curiosity Rover - Jet Propulsion Laboratory/NASA (12858 x 6312) - https://loftux.nu/share/s/PzaaDz10T9-wRru7rcxSeA https://loftux.nu/share/s/PzaaDz10T9-wRru7rcxSeA USS Vulcan (Engineering Drawing) (17600 × 13600) - https://loftux.nu/share/s/Kx9pmszJT6GyX7sdn-4hDw https://loftux.nu/share/s/Kx9pmszJT6GyX7sdn-4hDw

kevincox 11y ago

Really nice. The only thing I would change is to remove the "smooth" drag. It just makes it feel like it is lagging behind. Just stick it to my mouse.

hawleyal 11y ago
The smooth drag reduces eye strain caused by animating/easing a detailed image with low FPS.

alistproducer2 11y ago

That is some impressive JS. Well written and organized.

carlodelmundo 11y ago

Can anyone provide any insight on how OpenSeadragon is blazingly fast? Compare this to websites that have to rerender pixelated zoomed-in views after each zoom command.

ygra 11y ago
At its core it's just a quadtree of tiles, just like any other such application. This means that the data to transmit or keep in memory is just proportional to what fits on the screen. Furthermore, Seadragon employs animations to bridge perceptible performance gaps, e.g. loading new tiles. You get the blurry mess when zooming in as well, it gets slowly replaced by the sharper versions as new tiles get loaded. The use of the fading animation here helps mask the actual change, which makes it less visually jarring. Another thing is that zooming uses a bit of inertia for the animation, with an easing effect. This takes much longer than Google Maps' or Leaflet's immediate zoom but (a) again, reduces the effect that the new frame upon interaction is totally different from the previous, and (b) during the animation new tiles are loaded already and replaced. This often means that by the time the zoom animation ends you already have the sharper tiles on your screen and the blurry ones were used predominantly during the animation during which you didn't notice the blurryness. Panning also uses a spring to have some sort of easing for drags which means things are animated longer, thus more time for tiles to load without you noticing. Some people dislike that behaviour, I actually like it. It feels less "stiff" than what other tile-based viewers usually do. In general, it's not blazingly fast, or at least not faster than other technologies. It just makes good use of animations and a few perceptual tricks to make it feel fast. Which is actually, what user-facing applications should concentrate much more, in my opinion. Raw performance matters much less than what users perceive (for interactive things anyway).
- iangilman 11y ago
  Well put!
- jrochkind1 11y ago
  thanks for this!

stasm 11y ago

A similar project created by the National Library of Poland: https://github.com/Polona/malakh https://github.com/Polona/malakh Example: http://polona.pl/item/8214762/2/ http://polona.pl/item/8214762/2/

iangilman 11y ago
Nice! Looking at the code, it seems that it's a very old version of OpenSeadragon, back when it was just called Seadragon. It's still looking good, so perhaps they've been adding their own extensions to it. Thanks for pointing to it!

orless 11y ago

This looks nice, but my question is, why not LeafletJS or OL3? What are the unique features?

iangilman 11y ago
All three are great projects! As @jrochkind1 pointed out, the key difference is that OpenSeadragon is oriented around non-map imagery whereas both Leaflet and OpenLayers are focused on maps. This leads to a number of subtle (and not-so-subtle) differences. One key point is that OpenSeadragon allows you to set the zoom level precisely where you want it without rounding to the nearest tile level. Leaflet is getting this feature (they call it fractional zoom) in 1.0, but it's not released yet and it's been missing for a long time. If you are presenting a painting, for instance, and you want the contents to fill the available space on the page, this feature is essential. Probably the biggest difference (as far as I'm aware) is that OpenSeadragon allows you to lay out and animate hundreds of high-resolution images in the same zoomable scene. For some examples of that in action, see: http://blog.iangilman.com/2015/05/openseadragon-20-forest-to-tree-zooming.html http://blog.iangilman.com/2015/05/openseadragon-20-forest-to...
punnerud 11y ago
I was thinking the same. And LeafletJS have HW-acceleration for iPhone and a lot of other features.
jrochkind1 11y ago
I actually wasn't previously familiar with Leaflet, but when I look at it's demo's now, I generally find it's UI not quite as good as OpenSeadragon's. Another commenter below agrees with me. It also looks like Leaflet may be focused on geographic data? OSD is not, it has no special geo features (which would be a problem if you need them), but is focused on _images_, which may end up giving it the sort of features (back-end and UI) and API suitable for people concered with high-res images as images, rather than maps. (Does Leaflet actually have facility for dealing with multi-resolution-level tiling? I would assume so, but it's not clear from a quick skim of the docs...) Or it could just be that there are multiple products with overlapping feature sets. I don't think OpenSeadragon is neccesarily _newer_ than Leaflet, as I think you imply. Looks like the first commit in Leaflet repo is Aug 2010; the first commit in OpenSeadragon is Nov 2011. I imagine both took a while to reach maturity. It's also worth pointing out that OpenSeadragon is the open source continutation of an originally proprietary Microsoft product. I'd say they were both developed relatively simulataneously, neither one was developed after a mature competitor already existed. It does seem from this thread that OpenSeadragon was news to many people who already knew about Leaflet, so I guess Leaflet is better known? A year ago when I was looking for an open JS tiling image viewer, I found OpenSeadragon, and somehow didn't even come accross leaflet!

Mieroels 11y ago

Openslide has a nice demo using OpenSeadragon. The histological slides can easily be > 100,000 pixels in width and height http://openslide.org/demo/ http://openslide.org/demo/

jeremytubbs 11y ago

We use OpenSeadragon for our collection pages at: http://collection.imamuseum.org/ http://collection.imamuseum.org/ We use have a Python tile_generator: https://github.com/IMAmuseum/tile_generator https://github.com/IMAmuseum/tile_generator Also, I just developed a PHP composer package: https://github.com/jeremytubbs/deepzoom https://github.com/jeremytubbs/deepzoom

iangilman 11y ago
Wow, beautiful integration! Great content, too :-)