Serve dzi from S3 storage

Hi,

I’m trying to serve dzi file stored in s3 storage and getting errors below.

s3 storage

s3://s3-storage/hyper-resolution-image/sample.dzi s3://s3-storage/hyper-resolution-image/sample_files/{level}/{x}_{y}.jpeg

sample.dzi

<?xml version="1.0" encoding="UTF-8"?>
<Image xmlns="http://schemas.microsoft.com/deepzoom/2008"
  Format="jpeg"
  Overlap="1"
  TileSize="254"
  >
  <Size
    Height="42669"
    Width="58073"
  />
</Image>

get signed url from s3 storage

function s3_bucket_url_js (key: string) {
    let url = s3.getSignedUrl('getObject', {
      Bucket: "s3-storage",
      Expires: 60*30,
      Key: key,
    }, function (err, url) {
      if(err) {
        console.log(err)
      } else {
        console.log(url)
      } 
    })
    return url
  }

initialize openseadragon viewer

let viewer : OpenSeadragon = OpenSeadragon({
      id: "viewer",
      prefixUrl: "//openseadragon.github.io/openseadragon/images/",
      tileSources: {
        height: 42669,
        width: 58073,
        tileSize: 254,
        overLap: 1,
        getTileUrl: function (level : Number, x : Number, y : Number) {
          let url_s = "hyper-resolution-image/sample_files/" + level + "/" + x + "_" + y + ".jpeg"
          return s3_bucket_url_js(url_s)
        },
      }
    })

I’m getting two errors like below.

1. tile.js:136 Tile constructor needs ‘cacheKey’ variable: creation tile cache in Tile class is deprecated. TileSource.prototype.getTileHashKey will be used. (tile.js:136)
2. Assertion failed: [TileCache.getImageRecord] cacheKey is required (tilecache.js:237)

have any idea about this error or how to serve dzi from s3 storage?

Thank you.

[SamHall]

I serve up all my deep zoom images via S3. I have all folders and .dzi files in a publicly accessible bucket. Also requires setting cross-origin resource sharing (CORS) for my domain(s).

Best practice? Certainly not, but have not had any issues in over 8 years. The cost is miniscule.

You can view the source on many pages of my site: https://chattanoogahistory.com

Example:

var viewer = new OpenSeadragon.Viewer({
            id: "openseadragon-canvas",
            prefixUrl: "/openseadragon/images_TEST/",
            tileSources: [    
              "https://s3.amazonaws.com/dzchattzoom/024_B2.dzi", <!-- pg00 -->
              "https://s3.amazonaws.com/dzchattzoom/060_B2.dzi", <!-- pg01 -->
              "https://s3.amazonaws.com/dzchattzoom/078_B3.dzi"<!-- pg02 -->
            ],

[Aiosa]

@FrostScent we want to solve it nevertheless, since it might be an inconsistent/ faulty behaviour. I can see you are afraid of debugging - in JavaScript this is easy and fast, much faster than writing this post here. If you open the browser inspector window (f12) find in sources tab the tileSource.js file, set a breakpoint on the method we discuss and run it you see what goes wrong immediately. ~20 seconds.

Btw. learning how to do this will save you a lots of time in the future.