Vuejs + Cornerstonejs - DICOM file isn't a DICOM P10 file valid

245 Views Asked by At

I'm having problems rendering a DICOM file in the cornerstonejs library, where I'm passing a DICOM that I received from a company, however I'm getting the error in the browser console, saying that the DICOM file is not a valid DICOM P10. Can anyone help me with this?

... 

import dicomParser from 'dicom-parser'
import * as cornerstone from 'cornerstone-core'
import * as cornerstoneTools from 'cornerstone-tools'
import * as cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader'

export default {
  name: 'Viewport',
  data: () => ({
    helpers: {
      gridHelper: undefined
    },
    controls: {
      camera: undefined,
      scene: undefined,
      renderer: undefined,
      mesh: undefined,
      control: undefined
    }
  }),
  props: {
    axialImageId: { type: String, default: 'wadouri:https://example.com/SLZ000.dcm' },
    coronalImageId: { type: String, default: 'wadouri:https://example.com/SLZ000.dcm' },
    sagittalImageId: { type: String, default: 'wadouri:https://example.com/SLZ000.dcm' },
    axialStack: {
      type: Object,
      default: () => ({
        colormap: 'hot',
        invert: false,
        label: 'Axial',
        lut: '',
        modality: 'CT',
        rotation: 0,
        scale: 1.0,
        translation: { x: 0, y: 0 },
        voi: {
          windowCenter: 40,
          windowWidth: 400
        }
      })
    },
    coronalStack: {
      type: Object,
      default: () => ({
        colormap: 'hot',
        invert: false,
        label: 'Coronal',
        lut: '',
        modality: 'CT',
        rotation: 0,
        scale: 1.0,
        translation: { x: 0, y: 0 },
        voi: {
          windowCenter: 40,
          windowWidth: 400
        }
      })
    },
    sagittalStack: {
      type: Object,
      default: () => ({
        colormap: 'hot',
        invert: false,
        label: 'Sagittal',
        lut: '',
        modality: 'CT',
        rotation: 0,
        scale: 1.0,
        translation: { x: 0, y: 0 },
        voi: {
          windowCenter: 40,
          windowWidth: 400
        }
      })
    }
  },
  mounted () {
    // Inicializar o cornerstoneWADOImageLoader
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone
    cornerstoneWADOImageLoader.external.typedArray = window.Uint8Array
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser
    // cornerstoneWADOImageLoader.configure({
    //   beforeSend: function (xhr) {
    //     // Adicionar cabeçalho necessário para acesso ao servidor DICOM
    //     xhr.setRequestHeader('Authorization', `Bearer ${authToken}`)
    //   }
    // })

    // Inicializar as tomografias
    cornerstone.enable(this.$refs.axial, { renderer: 'webgl' })
    cornerstone.enable(this.$refs.coronal, { renderer: 'webgl' })
    cornerstone.enable(this.$refs.sagittal, { renderer: 'webgl' })

    cornerstone.loadImage(this.axialImageId).then(image => {
      cornerstone.displayImage(this.$refs.axial, image)
      cornerstoneTools.addStackStateManager(this.$refs.axial, ['stack'])
      cornerstoneTools.addToolState(this.$refs.axial, 'stack', this.axialStack)
    })

    cornerstone.loadImage(this.coronalImageId).then(image => {
      cornerstone.displayImage(this.$refs.coronal, image)
      cornerstoneTools.addStackStateManager(this.$refs.coronal, ['stack'])
      cornerstoneTools.addToolState(this.$refs.coronal, 'stack', this.coronalStack)
    })

    cornerstone.loadImage(this.sagittalImageId).then(image => {
      cornerstone.displayImage(this.$refs.sagittal, image)
      cornerstoneTools.addStackStateManager(this.$refs.sagittal, ['stack'])
      cornerstoneTools.addToolState(this.$refs.sagittal, 'stack', this.sagittalStack)
    })

...

I'm having trouble implementing this, as the cornerstonejs documentation doesn't explain how the import into their code is done in a clear way, making implementation more difficult.

0

There are 0 best solutions below