我在尝试通过一个 <input type="file"> 选择的本地DICOM文件，使用Cornerstone3D和 @cornerstonejs/dicom-image-loader 来渲染。

当我选择一个文件并调用 viewport.setStack([imageId]) 时，出现以下错误：

Error: loadImageFromNaturalizedMetadata: NATURALIZED中没有像素数据，对于imageId dicomfile:0

以下是完整的控制台日志：

CornerstoneRender: using GPU rendering
dicom.js:36 File {name: '0004.DCM', lastModified: 1781316702687, lastModifiedDate: Sat Jun 13 2026 05:11:42 GMT+0300 (Eastern European Summer Time), webkitRelativePath: '', size: 560498, …}lastModified: 1781316702687lastModifiedDate: Sat Jun 13 2026 05:11:42 GMT+0300 (Eastern European Summer Time) {}name: "0004.DCM"size: 560498type: ""webkitRelativePath: ""[[Prototype]]: FilelastModified: (...)lastModifiedDate: (...)name: (...)webkitRelativePath: (...)constructor: ƒ File()Symbol(Symbol.toStringTag): "File"size: (...)type: (...)get lastModified: ƒ lastModified()get lastModifiedDate: ƒ lastModifiedDate()get name: ƒ name()get webkitRelativePath: ƒ webkitRelativePath()[[Prototype]]: Blob
dicom.js:38 Loading imageId: dicomfile:0
dicom.js:40 [dicomImageLoader/wadouri] loadImageFromNaturalizedMetadata: start {imageId: 'dicomfile:0', scheme: 'dicomfile', url: '0', frameIndex: 0}
dicom.js:40 [dicomImageLoader/wadouri] loadImageFromNaturalizedMetadata: no NATURALIZED metadata, attempting to fetch and populate {imageId: 'dicomfile:0'}
dicom.js:43 Render complete
installHook.js:1 [dicomImageLoader/wadouri] loadImageFromNaturalizedMetadata: no COMPRESSED_FRAME_DATA for imageId {imageId: 'dicomfile:0', frameIndex: 0}
overrideMethod @ installHook.js:1
(anonymous) @ loadImage.js?v=68de6303:152
await in (anonymous)
loadImageFromNaturalizedMetadata @ loadImage.js?v=68de6303:165
loadImageFromImageLoader @ @cornerstonejs_core.js?v=68de6303:66282
loadAndCacheImage @ @cornerstonejs_core.js?v=68de6303:66324
(anonymous) @ @cornerstonejs_core.js?v=68de6303:72316
loadImages @ @cornerstonejs_core.js?v=68de6303:72315
_loadAndDisplayImageGPU @ @cornerstonejs_core.js?v=68de6303:72346
_loadAndDisplayImage @ @cornerstonejs_core.js?v=68de6303:72183
_setImageIdIndex @ @cornerstonejs_core.js?v=68de6303:72475
setStack @ @cornerstonejs_core.js?v=68de6303:72137
(anonymous) @ dicom.js:40
loadImage.js?v=68de6303:153 Uncaught (in promise) Error: loadImageFromNaturalizedMetadata: no pixel data in NATURALIZED for imageId dicomfile:0
    at loadImage.js?v=68de6303:153:19

这是使用这段代码：

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();
dicomImageLoaderInit({
  maxWebWorkers : 1
});


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

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) => {
  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 {
    viewport.setStack([imageId]).then(() => {
      viewport.render();
    })
    console.log('Render complete');
  } catch (err) {
    console.error('Failed to load DICOM image:', err);
  }
});

以及这份Vite配置（如相关的话）：

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

export default defineConfig({
  plugins: [
    viteCommonjs()
  ],

  optimizeDeps: {
    include: ['dicom-parser'],
    exclude: ['@cornerstonejs/dicom-image-loader']
  }
})

使用这个环境：

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

我知道我正在使用的DCM文件是有效的，因为它在其他查看器中能正确渲染。

为什么会出现 “no pixel data in NATURALIZED” 错误，以及我应该如何正确加载DCM文件？

解决方案

我找到了问题所在：你需要运行npm i @cornerstonejs/metadata，因为metadata已经被单独拆分出来。