CODEWITHSUNDEEP
javascriptc#openseadragondeepzoom
Pabdev
Pabdev

Reputation: 416

OpenSeadragon not loading image tiles from backend API server

I am trying to use OpenSeadragon to display high-resolution image tiles fetched from a backend API server. The server serves the Deep Zoom Image (DZI) file and the image tiles. I have followed the documentation and examples provided by OpenSeadragon, but I am facing issues with loading the image tiles.

Here is my setup:

  1. Backend API server: Developed using C# .NET Core.
  2. DZI XML file: Served as an XML response from the API server.
  3. Image tiles: Stored in a physical directory on the server filesystem.

I have confirmed that the DZI XML file and image tiles are properly stored and accessible on the server.

I have also tried the following:

  1. Enabled CORS on the API server to allow cross-origin requests.
  2. Configured the server to serve the image tiles as static files.
  3. Ensured that the DZI XML file contains the correct image URL and other properties.

However, when I try to load the DZI XML file and display the image tiles using OpenSeadragon, I encounter a 404 error. The network tab shows that the requests for the image tiles are returning a 404 status code.

I came across a similar Stack Overflow post (link: stackoverflow.com/questions/60426583/openseadragon-viewer-not-displaying-dzi-image) where the user faced a similar issue. The accepted answer suggests that OpenSeadragon expects the image tiles to be located in a separate directory named "[DZI filename]_files" relative to the DZI XML file.

Following this suggestion, I have organized my image tiles in a directory named "cropped_img_files" located in the same level as the DZI XML file ("cropped_img.dzi"). However, I am still experiencing the 404 error.

Here is the relevant code on the client-side:

// Code to fetch DZI XML file and initialize OpenSeadragon

    <!DOCTYPE html>
    <html>
    <head>
      <title>OpenSeadragon Fetch Example</title>
      <script type="text/javascript" src="/openseadragon-bin-4.0.0/openseadragon.min.js"></script>
    </head>
    <body>
      <div id="openseadragon-viewer"></div>

      <script>
        fetch('https://localhost:7257/api/images/cropped_img/dzixml')
          .then(response => response.text())
          .then(xmlData => {
            const parser = new DOMParser();
            const xmlDoc = parser.parseFromString(xmlData, 'application/xml');
            const imageNode = xmlDoc.getElementsByTagName('Image')[0];
            const sizeNode = xmlDoc.getElementsByTagName('Size')[0];

            const dzi = {
              Image: {
                xmlns: imageNode.getAttribute('xmlns'),
                Url: 'https://localhost:7257/api/images/cropped_img_files/',
                Format: imageNode.getAttribute('Format'),
                Overlap: imageNode.getAttribute('Overlap'),
                TileSize: imageNode.getAttribute('TileSize'),
                Size: {
                  Height: sizeNode.getAttribute('Height'),
                  Width: sizeNode.getAttribute('Width')
                }
              }
            };

            // Create an OpenSeadragon viewer and load the tileSources
            const viewer = OpenSeadragon({
              id: 'openseadragon-viewer',
              prefixUrl: '/openseadragon-bin-4.0.0/images/',
              tileSources: dzi
            });
          })
          .catch(error => {
            console.error('Error loading DZI XML data:', error);
          });
      </script>
    </body>
    </html>

And here is the relevant code on the API server:

// Code to serve the DZI XML file and image tiles

    [EnableCors(policyName: nameof(MyCorsPolicy))]
    [HttpGet]
    [Route("{id}/dzixml")]
    [Produces("application/xml")]
    public IActionResult GetDziImageXML(string id)
    {
        try
        {
            // Retrieve the DZI image based on the provided ID
            string filePath = GetDziFilePath(id);

            if (filePath != null && System.IO.File.Exists(filePath))
            {
                // Set the appropriate response headers
                Response.Headers.Add("Content-Type", "application/xml");
                Response.Headers.Add("Access-Control-Allow-Origin", "*");
                Response.Headers.Add("Access-Control-Allow-Methods", "GET");
                Response.Headers.Add("Access-Control-Allow-Headers", "Content-Type");

                // Return the DZI file content as the response
                return PhysicalFile(filePath, "application/xml");
            }
            else
            {
                // DZI file not found, return appropriate error response
                return NotFound();
            }
        }
        catch (Exception ex)
        {
            return StatusCode(500, $"An error occurred: {ex.Message}");
        }
    }
// ...

I suspect that there might be an issue with how I am constructing the URLs for the image tiles or a misconfiguration on the server.

Could someone please help me identify the issue and provide guidance on how to properly serve the DZI XML file and image tiles from the backend API server using OpenSeadragon?

Any suggestions or insights would be greatly appreciated. Thank you!

UPDATED: As per @iangilman comments I have tried with giving OSD div, width and height style :

<div id="openseadragon-viewer" style="width: 1000; height: 800px;"></div>

But still I am getting 404 error as below:

404 Error

404 Error : Tile 4/0_0 failed to load

Upvotes: 0

Views: 440

Answers (0)

Related Questions