Why can't I show dicom's image?

Web vtk.js
1

Here’s my code.：
test () {
axios.get(‘src/views/modules/generator/demo01.dcm’, {
responseType: ‘arraybuffer’
}).then(response => {

    const dicomData = this.parseDICOM(response.data)

 
    this.render3DModel(dicomData)

  }).catch(error => {
    console.error(error)
 
  })
},


parseDICOM (arrayBuffer) {
  const byteArray = new Uint8Array(arrayBuffer)
  const dataSet = DICOMParser.parseDicom(byteArray)
  return dataSet
},

render3DModel (dicomData){

  const container = document.getElementById('vtk-container')


  const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
    container: container,
    background: [0, 0, 0]
  })
 
  const imageData = vtkImageData.newInstance()
  imageData.setDimensions(512, 512, 512) 
  imageData.setSpacing(1, 1, 1)

 
  const dataArray = vtkDataArray.newInstance({
    numberOfComponents: 1,
    values: dicomData,
    name: 'DICOM_PixelData',
  })
 
  imageData.getPointData().setScalars(dataArray)

  
  const volumeMapper = vtkVolumeMapper.newInstance()
  volumeMapper.setInputData(imageData)

  const volume = vtkVolume.newInstance()
  volume.setMapper(volumeMapper)


  fullScreenRenderer.getRenderer().addVolume(volume)
  fullScreenRenderer.getRenderWindow().render()
},

I’m a rookie. Please help me.

2

It’s possibly that you didn’t import ‘@kitware/vtk.js/Rendering/Profiles/volume’ at the beginning

3

import vtkFullScreenRenderWindow from ‘@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow’
import vtkImageData from ‘@kitware/vtk.js/Common/DataModel/ImageData’
import vtkVolume from ‘@kitware/vtk.js/Rendering/Core/Volume’
import vtkVolumeMapper from ‘@kitware/vtk.js/Rendering/Core/VolumeMapper’
import vtkDataArray from ‘@kitware/vtk.js/Common/Core/DataArray’
That’s all I imported.
Do you want to replace import vtkVolume from ‘@kitware/vtk.js/Rendering/Core/Volume’ with @kitware /vtk.js/Rendering/Profiles/volume?

4

I suspect there is a problem with the dataArray you created manually, you need to look at whether the DICOM data is 8 bits, 16 bits or 32 bits, again you just got a piece of DICOM data, It shouldn’t be 512 * 512 * 512, but should your spacing be consistent with the DICOM data you’re reading?

5

Sorry, I am not sure about all these as my tutor gave me the task of displaying the 3D image of the dicom by getting the patient’s dicom file and then displaying the dicom using vtk.js, so I asked ChartGPT. it gave me the code generated. Biggs. Can you tell me the right way to do it? PLEASE!!!

6

@t1413194910 Just add one line at the beginning, in general, you will need to do the followings to display a dicom series image:

  1. Import a series of dicom and convert to vtkImage, I saw you used dicom-parser to load a single, but I suggest to load a series with itk-wasm;
  2. Add the vtkImage to a mapper and add the mapper to a volume, if you just do this you will see a black-white colored box, you will need to add a color/opacity transfer to get a result that you want;
  3. Add the volume to a renderer and call a render() on the renderWindow
    You can check my demo for a problem to see the steps, it is a vue project: volume demo
8

The project given to me by my mentor can only have noed 8.11.1 running if import {
readImageDICOMFileSeries,
readImageDICOMArrayBufferSeries,
} from “itk-wasm”; it will report a parse error.
So I can only use import * as DICOMParser from ‘dicom-parser’, if I use dicom-parser then this code
let vtkImage = vtkImageData.newInstance()
vtkImage = vtkITKHelper.convertItkToVtkImage(dicomData) should be changed to what?

9

Hi, today I tried to use the volume demo you gave me, but I had some problems, the dicom file my mentor gave me was also blacked out when I opened it with the volume demo, but when I use GitHub - Kitware/VolView: Kitware VolView: an all-in-one radiological viewer!
But when I open it with it shows me the 3D image of the dicom file my tutor gave me, so I’m confused now, what’s wrong with it?
Please reply me when you see the message, thanks!

10

DICOMParser.parseDicom(byteArray) doesn’t return the pixel data. It returns an object that contains parsed DICOM data. The dicom-parser README has an example of extracting the pixel data.

If you can use itk-wasm, I would recommend it since it’ll be easier to use.

import { readImageDICOMArrayBufferSeries } from 'itk-wasm'
import vtkITKHelper from '@kitware/vtk.js/Common/DataModel/ITKHelper'

axios.get('demo01.dcm', { responseType: 'arraybuffer' }).then(async response => {
  const itkImage = await readImageDICOMArrayBufferSeries([response.data])
  const vtkImage = vtkITKHelper.convertItkToVtkImage(itkImage)
  volumeMapper.setInputData(vtkImage)
})
11

Thanks for getting back to me, but I can’t use itk-wasm in the project my mentor gave me, and I don’t know why, it keeps giving me errors.

1690334152613
16903341526131246×716 83.9 KB

So I can only use DICOMParser.parseDicom(byteArray), you mean if I use DICOMParser.parseDicom(byteArray) just have to extract the pixel data and put it into vtkITKHelper.convertItkToVtkImage Is that correct?

12

It looks like your project isn’t set up to handle itk-wasm assets. I’m guessing you’re using webpack. If so, please follow the documentation here: itk-wasm

I’m not sure if dicom-parser will return a decoded image pixel array. If it does, then you will be able to create a vtkImageData. If it doesn’t, then you will have to find a library that does the decoding step. itk-wasm reads and decodes DICOM for you automatically.

13

Hi, I tried to configure the following as per the documentation, but it still reports the same error as before

14

What does your webpack config look like? Are you using vue-cli?

15

It’s just that my webpack config

‘use strict’
const path = require(‘path’)
const utils = require(‘./utils’)
const config = require(‘…/config’)
const vueLoaderConfig = require(‘./vue-loader.conf’)

const webpack = require(‘webpack’)

function resolve(dir) {
return path.join(__dirname, ‘…’, dir)
}

const createLintingRule = () => ({
/* test: /.(js|vue)$/,
loader: ‘eslint-loader’,
enforce: ‘pre’,
include: [resolve(‘src’), resolve(‘test’)],
options: {
formatter: require(‘eslint-friendly-formatter’),
emitWarning: !config.dev.showEslintErrorsInOverlay
} */
})

module.exports = {
context: path.resolve(__dirname, ‘…/’),
entry: {
app: [‘babel-polyfill’, ‘./src/main.js’]
},
output: {
path: config.build.assetsRoot,
filename: ‘[name].js’,
publicPath: process.env.NODE_ENV === ‘production’
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: [‘.js’, ‘.vue’, ‘.json’],
alias: {
‘vue$’: ‘vue/dist/vue.esm.js’,
‘@’: resolve(‘src’),
}
},
module: {
rules: [
…(config.dev.useEslint ? [createLintingRule()] : ),
{
test: /.vue$/,
loader: ‘vue-loader’,
options: vueLoaderConfig
},
{
test: /.js$/,
loader: ‘babel-loader’,
include: [resolve(‘src’), resolve(‘test’)]
},
{
test: /.svg$/,
loader: ‘svg-sprite-loader’,
include: [resolve(‘src/icons’)]
},
{
test: /.(png|jpe?g|gif|svg)(?.)?/, loader: 'url-loader', exclude: [resolve('src/icons')], options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?/,
loader: ‘url-loader’,
options: {
limit: 10000,
name: utils.assetsPath(‘media/[name].[hash:7].[ext]’)
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.)?$/,
loader: ‘url-loader’,
options: {
limit: 10000,
name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]’)
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it’s native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: ‘empty’,
fs: ‘empty’,
net: ‘empty’,
tls: ‘empty’,
child_process: ‘empty’
},
// Import external libraries without webpack bundling
externals: {
mockjs: ‘Mock’,
echarts: ‘echarts’,
ueditor: ‘UE’
}
}

16

What is your webpack version? I forget if webpack v4 supports import.meta.url.