How to read series of Dicom images into Django using ITK.js for web volume rendering using VTK.js?

Yuvi-416 · September 14, 2021, 5:09pm

Hello everyone,
I want to load series of DICOM images into the server and want to visualize it as a volume rendering using vtk.js on the web. As I found here (https://discourse.vtk.org/t/request-hundreds-images-by-http/4154) that vtk.js doesn’t have support to load DICOM images so instead of VTK.js, I have to use ITK.js to read the Dicom image and later need to pass the input to the VTK.js for visualization.

I followed some examples from VTK.js pages and they worked very well in the Django framework, now I need to implement the ITK.js part to call DICOM series images.

Is there a way to just pass the ITK.js library like vtk.js unpkg.com in the Django framework or do I need to build from the beginning? I just need it to read Dicom images as my work is related to DICOM files.

And also I couldn’t find a better example of how to call or load DICOM images using ITK.js and then what should I pass to VTK.js.

Any helpful link related to ITK.js and VTK.js for reading the series of Dicom images in the Django framework would be healful.

Thank you!

dzenanz · September 14, 2021, 6:00pm

MIQA project uses itk.js and django. It only handles NIFTIs at the moment, but you could find some inspiration here:

github.com

OpenImaging/miqa/blob/683dca91c592d95537a291bfcaeab6effeb11eab/client/src/store/index.ts#L69-L166

    
      
          function getData(id, file, webWorker = null) {
            return new BluebirdPromise((resolve, reject) => {
              if (datasetCache.has(id)) {
                resolve({ imageData: datasetCache.get(id), webWorker });
              } else {
                const fileName = file.name;
                const io = new FileReader();
          
          
      io.onload = function onLoad() {
                  readImageArrayBuffer(webWorker, io.result, fileName)
                    .then(({ webWorker, image }) => { // eslint-disable-line no-shadow
                      const imageData = convertItkToVtkImage(image, {
                        scalarArrayName: getArrayName(fileName),
                      });
                      const dataRange = imageData
                        .getPointData()
                        .getArray(0)
                        .getRange();
                      datasetCache.set(id, { imageData });
                      // eslint-disable-next-line no-use-before-define

This file has been truncated. show original

matt.mccormick · September 14, 2021, 10:10pm

Hi,

To use itk.js from unpkg.com, see this example:

To read a DICOM series, use readImageDICOMFileSeries. To read a multi-frame DICOM, use readImageFile.

Convert the resulting itk/Image to a vtkImageData with convertItkToVtkImage.

Yuvi-416 · September 27, 2021, 9:53am

Hi,
Sorry for the late reply and thanks for the suggestion.
I successfully use ITK.js to read the Dicom images in the Django framework. I couldn’t use itk.js from unpkg.com as I guess there’s some problem either on my side or somewhere inside that package. But after passing itk.js as like this
<script src="https://unpkg.com/itk@14.0.1/umd/itk.js"></script> worked for me.
I was wondering is there any way to pass below function in VTK.js:
smooth = vtk.vtkImageGaussianSmooth()
I searched a lot but I couldn’t find an image gaussian function inside both itk and vtk.js.
Do you have any suggestions for this?
Thank you!

dzenanz · September 27, 2021, 3:28pm

Is there something problematic about SmoothWithRecursiveGaussian?