URL formatting - IIIF images from manifest url in React using OpenSeaDragon

99 Views Asked by At

I am trying to display IIIF images in my React application using OpenSeaDragon (OSD). All works well, untill I actually try to read in the images from the source.

First off, I followed the example from the OSD website: https://openseadragon.github.io/examples/tilesource-iiif/. After ignoring the TypeScript errors, this example works as expected and displays the image in the canvas. Now I went and replaced the static @id property with the value I get returned from one of our source APIs (we want to support multiple). The manifest (info.json) url: https://iiif-manifest.oxalis.br.fgov.be/specimen/BR0000025668070V/manifest. This tries to fetch the image from the source API, but fails to find so because the url is formatted incorrectly.

Generated url by OSD: https://iiif-manifest.oxalis.br.fgov.be/specimen/BR0000025668070V/manifest/full/328,/0/default.jpg

Correct url provided by source: https://iiif-image.oxalis.br.fgov.be/V/BR0/000/025/668/070/BR0000025668070V.jpg/full/full/0/default.jpg

As you can see the url provided by the source does make use of the IIIF API specification, but uses a different path for the manifest file and the actual images that OSD specifies.

How can I adapt the OpenSeaDragon configuration to correctly format the urls? My expectation was this is going to be defined in the manifest file, but whatever I try, the path does not change and keeps on appending: '/full/328,/0/.default.jpg' at the end of the manifest url.

My OpenSeaDragon config:

OpenSeaDragon({
     id: "openSeaDragon",
     preserveViewport: true,
     visibilityRatio: 1,
     defaultZoomLevel: 0,
     sequenceMode: true,
     tileSources: {
          "@context": manifest['@context'],
          "@id": manifest['@id'],
          "height": 7200,
          "width": 5233,
          "profile": ["http://iiif.io/api/image/2/level2.json"],
          "protocol": "http://iiif.io/api/image",
          "tiles": [{
               "scaleFactors": [1, 2, 4, 8, 16, 32],
               "width": 1024
          }]
     },
     showFullPageControl: false,
     showHomeControl: false,
     prefixUrl: "https://cdn.jsdelivr.net/npm/[email protected]/build/openseadragon/images/"
})

Where @id = "https://iiif-manifest.oxalis.br.fgov.be/specimen/BR0000025668070V/manifest"

and @context = ["http://www.w3.org/ns/anno.jsonld", "http://iiif.io/api/presentation/2/context.json"]

Thanks in advance! ~ Tom

0

There are 0 best solutions below