使用Cornerstone3D加载DCM文件出现‘no pixel data’错误的原因及解决

问题描述 #

通过<input type="file">选择本地DICOM文件，使用Cornerstone3D和@cornerstonejs/dicom-image-loader渲染时，调用viewport.setStack([imageId])抛出以下错误：

Error: loadImageFromNaturalizedMetadata: no pixel data in NATURALIZED for imageId dicomfile:0

控制台日志显示加载流程中无法获取像素数据，且确认该DCM文件可在其他Viewer正常渲染。

环境版本：

• @cornerstonejs/core: 5.0.8
• @cornerstonejs/dicom-image-loader: 5.0.8
• vite: 8.0.12

错误原因 #

• 异步处理漏洞：viewport.setStack是异步Promise操作，原代码未用await等待完成，且try/catch无法捕获Promise内部异常，导致渲染提前执行，同时错误无法被捕获。
• DICOM Loader配置不全：初始化时未指定web worker路径，导致无法启动DICOM解析worker，无法提取像素数据。
• Vite依赖优化配置不当：排除了@cornerstonejs/dicom-image-loader的优化，可能导致依赖加载异常。

解决方案 #

1. 修正异步处理逻辑 #

使用await等待setStack完成，确保图像加载后再执行渲染，同时正确捕获异步错误：

input.addEventListener('change', async (event) => {
  const file = event.target.files[0];
  console.log('this is the dcm file', file);
  const imageId = cornerstoneDICOMImageLoader.wadouri.fileManager.add(file);
  console.log('Loading imageId:', imageId);
  try {
    await viewport.setStack([imageId]);
    viewport.render();
    console.log('Render complete');
  } catch (err) {
    console.error('Failed to load DICOM image:', err);
  }
});

2. 完善DICOM Image Loader初始化 #

添加web worker路径配置，确保Cornerstone能加载解析DICOM的worker脚本：

import { init as coreInit } from '@cornerstonejs/core';
import { init as dicomImageLoaderInit } from '@cornerstonejs/dicom-image-loader';
import { RenderingEngine, Enums } from '@cornerstonejs/core';
import * as cornerstoneDICOMImageLoader from '@cornerstonejs/dicom-image-loader';

coreInit();
// 初始化时指定worker脚本路径
dicomImageLoaderInit({
  maxWebWorkers: 1,
  webWorkerPath: new URL(
    '@cornerstonejs/dicom-image-loader/dist/dicomImageLoaderWorker.js',
    import.meta.url
  ).href,
});

3. 调整Vite配置优化依赖处理 #

移除@cornerstonejs/dicom-image-loader的排除项，添加ES模块别名，确保依赖正确加载：

import { defineConfig } from 'vite';
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';

export default defineConfig({
  plugins: [viteCommonjs()],
  optimizeDeps: {
    include: ['dicom-parser'],
  },
  resolve: {
    alias: {
      '@cornerstonejs/dicom-image-loader': '@cornerstonejs/dicom-image-loader/dist/esm',
    },
  },
});

4. 确保DOM元素初始化时机正确 #

使用requestAnimationFrame延迟初始化渲染引擎，确保DOM元素已挂载到页面：

const content = document.getElementById('content');

requestAnimationFrame(() => {
  const element = document.createElement('div');
  element.style.width = '700px';
  element.style.height = '700px';
  content.appendChild(element);

  const renderingEngine = new RenderingEngine('myRenderingEngine');
  const viewportId = 'CT_AXIAL_STACK';

  renderingEngine.enableElement({
    viewportId,
    type: Enums.ViewportType.STACK,
    element,
  });

  const viewport = renderingEngine.getViewport(viewportId);

  const input = document.getElementById('dicom');

  input.addEventListener('change', async (event) => {
    // 上述修正后的处理逻辑
  });
});

内容的提问来源于stack exchange，提问作者Yousef Tag