Extend OpenSeadragon internals to support async `getTileUrl()` with custom tile source.

extend-osd.js

$ = window.OpenSeadragon;

$.TileSource = class extends $.TileSource {
  downloadTileStart(context) {
    // 👼 Keep original code as is
    var dataStore = context.userData,
      image = new Image();

    dataStore.image = image;
    dataStore.request = null;

    var finish = function(error) {
      if (!image) {
        context.finish(
          null,
          dataStore.request,
          "Image load failed: undefined Image instance."
        );
        return;
      }
      image.onload = image.onerror = image.onabort = null;
      context.finish(error ? null : image, dataStore.request, error);
    };
    image.onload = function() {
      finish();
    };
    image.onabort = image.onerror = function() {
      finish("Image load aborted.");
    };

    // 👻 Replace whole logic here
    context.src
      .then((url) => {
        image.src = url;
      })
      .catch((err) => finish(err.message));
  }

  // 👻 Return fixed value
  hasTransparency() {
    return false;
  }
};

usage.js

new OpenSeadragon.Viewer({
  // ...

  tileSources: {
    height: 512 * 256,
    width: 512 * 256,
    tileSize: 256,
    // Now it's async!
    getTileUrl: async (level, x, y) => fetchImagePath(level, x, y),
  },
});