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.