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

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();



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



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?

Hi, have you been able to solve your problem?

1 Like

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