Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How dicom-parser.js works with vtk.js to achieve dicom file display #256

Closed
1413194910 opened this issue Jul 26, 2023 · 4 comments
Closed

Comments

@1413194910
Copy link

I'm not sure if I'm writing this correctly, so please enlighten me

The code is as follows
render3DModel (dicomData) {
// 使用dicom-parser解析DICOM文件
const byteArray = new Uint8Array(dicomData)
const dataSet = DICOMParser.parseDicom(byteArray)

  console.log("dataSet",dataSet.byteArray)
  // 获取图像数据的字节数组
  const pixelDataByteArray = dataSet.byteArray

  // 获取图像尺寸和像素间隔,如果不存在则设置默认值
  const rows = dataSet.uint16('x00280010') || 1 // 图像行数,默认为1
  const columns = dataSet.uint16('x00280011') || 1 // 图像列数,默认为1
  const slices = dataSet.uint16('x00540081') || 1 // 图像层数,默认为1
  const pixelSpacingX = dataSet.floatString('x00280030', 0) || 1 // X轴像素间隔,默认为1
  const pixelSpacingY = dataSet.floatString('x00280030', 1) || 1 // Y轴像素间隔,默认为1
  const sliceSpacing = dataSet.floatString('x00180088') || 0 // 图像切片间隔,默认为0

  // 1.typedArray传递给vtk的dataArray
  // 将图像数据的字节数组转换为JavaScript数组
  const dicomDataArray = Array.from(pixelDataByteArray)
  // 创建vtkDataArray,并将DICOM像素数据填充到数组中
  const dataArray = vtkDataArray.newInstance({
    numberOfComponents: 1, // 单通道灰度图像
    values: dicomDataArray,
    name: 'DICOM_PixelData',
  })
  // 2.生成vtkImageData
  // 创建vtkImageData,并设置图像尺寸和像素间隔
  const imageData = vtkImageData.newInstance()
  imageData.setDimensions(rows, columns, slices)
  imageData.setSpacing(pixelSpacingX, pixelSpacingY, sliceSpacing)
  // 将vtkDataArray设置为vtkImageData的Scalars
  imageData.getPointData().setScalars(dataArray)

  // 3生成vtkVolumeMapper
  // 创建vtkVolumeMapper
  const volumeMapper = vtkVolumeMapper.newInstance()
  volumeMapper.setInputData(imageData)
  // 4生成vtkVolume
  const volume = vtkVolume.newInstance()
  volume.setMapper(volumeMapper)
  // 5把volume添加到由vtk的renderwindow获取的renderer里面
  // 使用vtk.js创建vtkFullScreenRenderWindow
  const container = document.getElementById('vtk-container')
  const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
    container: container,
    background: [0, 0, 0],
  })

  try {
    // 将vtkVolume添加到渲染器并渲染
    fullScreenRenderer.getRenderer().addVolume(volume)
    fullScreenRenderer.getRenderWindow().render()
  } catch (error) {
    console.error('渲染3D图像时出现错误:', error)
  } finally {
    console.log('结束')
  }
},
@aodong8808
Copy link

@yagni
Copy link
Collaborator

yagni commented Jul 26, 2023

It depends on what you're trying to do. For example: which modalities are you wanting to display: Dose, CT, PET, etc.? (0054,0081) only exists for Nuclear Medicine and PET. Dose files contain the entire dose volume as a single block; image series (CT, PET, MR, etc.) have each slice as a separate file. Are you wanting to display a volume as a whole, or just a single 2D image at a time?

From the dicomParser side, you're going to want to just pass in the pixel data, not the whole byte array. See the "Usage" section in README for an example of getting the pixel data bytes (the pixelData variable there is what you'd pass to vtk).

This VTK example might be helpful as well.

@1413194910
Copy link
Author

1413194910 commented Jul 27, 2023 via email

@yagni
Copy link
Collaborator

yagni commented Jul 31, 2023

@1413194910 You probably want to default slice spacing to > 0. Other than that, your DICOM code looks reasonable. For the VTK side, you'll need to ask elsewhere, though. Try dannyrb's repo that @aodong8808 linked above (this file looks like a good place to start) or the vtk.js repo. If you have DICOM-specific questions, feel free to reopen and ask here.

@yagni yagni closed this as completed Jul 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants