Custom image loader

Support Development
1

Describe Your Question

  • I am trying to provide a custom image loader and am struggling to do so.
    Any advice or help would be lovely. I believe they’re being loaded in but not displayed on the viewport. I am trying to move away from the cornerstoneWADOImageLoader as it is deprecated and is failing to load some of my dicom files that other systems can load.

The base64 that is returned is of the entire .dcm file.

component.library_load.dicom.image_loader_ = function(imageId) {
  console.log('imageId', imageId);
  const key = imageId.split(':')[1];
  console.log('window.dicomParser', window.dicomParser);

  let xhr = null;
  const cancelFn = () => {
    if (xhr) {
      xhr.abort();
      console.log('Aborting request');
    }
  };

  const promise = new Promise((resolve, reject) => {
    xhr = api('<server>', 'get_contents_base64', key, function(base64) {
      try {
        const canvas = document.createElement('canvas');
        const binary = atob(base64);
        const byteArray = new Uint8Array(binary.length);
        for (let i = 0; i < binary.length; i++) {
          byteArray[i] = binary.charCodeAt(i);
        }

        const dicomParser = window.dicomParser;
        const dataSet = dicomParser.parseDicom(byteArray);

        const pixelDataElement = dataSet.elements.x7fe00010;
        const pixelData = new Uint8Array(dataSet.byteArray.buffer, pixelDataElement.dataOffset, pixelDataElement.length);

        const img = {
          'imageId': imageId,
          'minPixelValue': 0,
          'maxPixelValue': 255,
          'slope': 1,
          'intercept': 0,
          'windowCenter': 128,
          'windowWidth': 255,
          'getPixelData': function() {
            return pixelData;
          },
          'getCanvas': function() {
            return canvas;
          },
          'rows': dataSet.uint16('x00280010'),
          'columns': dataSet.uint16('x00280011'),
          'height': dataSet.uint16('x00280010'),
          'width': dataSet.uint16('x00280011'),
          'color': false,
          'rgba': false,
          'numComps': 1,
          'columnPixelSpacing': dataSet.float('x00280030'),
          'rowPixelSpacing': dataSet.float('x00280030'),
          'sliceThickness': dataSet.float('x00180050'),
          'invert': false,
          'sizeInBytes': pixelData.length,
          'data': dataSet,
        };

        console.log('image', img);
        resolve(img);
      } catch (error) {
        reject(error);
      }
    }, xhr);
  });

  return {
    promise,
    cancelFn,
  };
};
1 Like
2

Do you need a custom image loader? If you tell me your use case, I might be able to help you. What is your server, and how does it respond?

3

Thank you for the response!

I figured out that I was on the wrong track. I was moving from the deprecated cornerstoneWADOImageLoader to the recommended ‘@cornerstonejs/dicom-image-loader’. I now see that I can use the imageId of ‘wadouri: …’ to load the files from my server.

Now my struggle has been bundling ‘@cornerstonejs/core’, ‘@cornerstonejs/tools’, and ‘@cornerstonejs/dicom-image-loader’ together in a file that exposes their main entry objects on the window object. Such as; window.cornerstone_core, window.cornerstone_tools, window.cornerstone_image_loader.

I have bundled these 3 modules with yarn and webpack but now the tools are broken with my implementation.

4

Do you have a repository or a small proof of concept to demonstrate? It would help us debug the issue.

5

I’ve implemented a custom loader to load PNG/JPEG images locally. Everything works smoothly up to viewport.setStack([imageId]).then(() => { viewport.render(); }). However, after executing viewport.render(), the image does not render on the canvas, and the console does not display any errors.