Loading .nii files in vtk.js using itk-wasm

Web vtk.js
1

Hi everyone,

I need support understanding how to load .nii images using vtk.js. After going through some of the posts and conversations. I believe the way to do it is reading an array buffer into an itk image and then passing it to vtk.js renderer. Here is my code

import { readImageArrayBuffer } from "itk-wasm";
// Other Imports

 const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
        rootContainer: vtkContainerRef.current,
      });

      // Create renderer and render window
      const renderer = fullScreenRenderer.getRenderer();
      const renderWindow = fullScreenRenderer.getRenderWindow();

      // Create Mapper and Actor
      const actor = vtkImageSlice.newInstance();
      const mapper = vtkImageMapper.newInstance();

      mapper.setSliceAtFocalPoint(true);

      actor.setMapper(mapper);

      // Fetch Data
      fetch(niftiUrl)
        .then((res) => res.arrayBuffer())
        .then((data) => {
          readImageArrayBuffer(null, data, "nifti_temp_file.nii.gz").then(
            ({ image: itkImage, webWorker }) => {
              webWorker.terminate();
              const vtkImage = vtkITKHelper.convertItkToVtkImage(itkImage);

              mapper.setInputData(vtkImage);

              renderer.addActor(actor);
              renderer.resetCamera();
              renderWindow.render();
            }
          );
        });

However, on doing this I get an blank canvas. And there are no console errors, my api is sending data correctly. So I’m wondering if this is a camera positioning problem or am I incorrectly loading my data?

2

Hi, have you been able to solve your problem?

1 Like
3

You can try @itk-wasm/image-io, it has niftiReadImage function.