Search code examples
javascriptbrowseropenseadragon

Openseadraon download in background

I am trying to download full size of deep zoom images using openseadragon (OSD) version 2.2.1. My images are on a server and I am able to open them using OSD. My steps for downloading them are:

  1. Load list of the images into body using
  2. Check what images to download using checkbox
  3. Click 'Download' button to download

Download function has following functionality:

  • Load list of images into gridview
  • Create Canvas and append to the body
  • Create OSD viewer if not exist
  • Open first checked image using: viewer.open(tileSources)
  • Add OSD handler 'open' for setting full size of the source.
  • Draw shapes current image has them
  • Add OSD handler 'tile-drawing' for setting value for variable which is simple time
  • Set Interval for checking every 10 seconds of the variable changes. If the variable doesn't change for the last 10 seconds that means all tiles are drawn.
  • If all tiles are drawn download image using 'File-Saver' library

Full Size of the source for OSD viewer:

$("#OSDelement").attr("style", "height: " + viewer.world.getItemAt(0).source.dimensions.y / window.devicePixelRatio) + "px;" +
 "width: " + (viewer.world.getItemAt(0).source.dimensions.x / window.devicePixelRatio) + "px");

Sample mock-up of the site is: mock-up

Everything is downloading fine when the browser's tab is active (it takes time to download, but it is doing its job). Problem is that I am trying to download in 'background'. When I am going to the different tab, OSD tiles stop loading. How do I force OSD open and load tiles when browser's tab is not active? Sometimes it starts downloading when tab is not active per browser session, but tiles not drawing at all. It downloads empty files, because there are no tiles on the viewer. There are no errors at all.

Please give me some ideas. Thanks!

Solution

  • The reason it doesn't work in the background is that it's using requestAnimationFrame, which pauses when your tab is in the background. One fix would be to do something like: 

    OpenSeadragon.requestAnimationFrame = function(callback) {
    setTimeout(callback, 16);
};