Vuejs + Cornerstonejs：多幅DICOM图像栈渲染实现求助

以下是从本地/服务器加载并渲染多幅DICOM文件的具体步骤，完全基于CornerstoneJS生态实现：

1. 安装依赖 #

首先引入核心库，通过npm安装：

npm install cornerstone-core cornerstone-wado-image-loader dicom-parser

如果需要标注、测量等工具，可额外安装cornerstone-tools。

2. 准备页面视口 #

为每幅DICOM图像准备独立的视口容器，可提前静态定义或动态创建：

<!-- 静态视口示例 -->
<div id="viewport1" style="width: 400px; height: 400px; border: 1px solid #333; display: inline-block; margin: 10px;"></div>
<div id="viewport2" style="width: 400px; height: 400px; border: 1px solid #333; display: inline-block; margin: 10px;"></div>

3. 初始化Cornerstone环境 #

在脚本中初始化核心库和图像加载器：

// 初始化所有静态视口
document.querySelectorAll('[id^="viewport"]').forEach(el => {
  cornerstone.enable(el);
});

// 关联依赖库
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;

4. 封装加载渲染函数 #

将单幅DICOM的加载和渲染逻辑封装成可复用的异步函数：

// 读取文件为ArrayBuffer的辅助函数
function readFileBuffer(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = e => resolve(e.target.result);
    reader.onerror = reject;
    reader.readAsArrayBuffer(file);
  });
}

// 加载并渲染指定视口的DICOM文件
async function renderDicomToViewport(viewportId, dicomFile) {
  const viewportEl = document.getElementById(viewportId);
  const buffer = await readFileBuffer(dicomFile);
  
  // 注册文件并生成图像ID
  const imageId = cornerstoneWADOImageLoader.fileManager.add(dicomFile);
  // 加载图像
  const image = await cornerstone.loadImage(imageId);
  // 渲染到视口
  cornerstone.displayImage(viewportEl, image);
}

5. 批量处理多文件 #

通过文件选择器获取多幅DICOM文件，批量渲染：

<!-- 文件选择器 -->
<input type="file" id="dicomSelector" multiple accept=".dcm">

document.getElementById('dicomSelector').addEventListener('change', async (e) => {
  const files = Array.from(e.target.files);
  
  // 若静态视口不足，动态创建视口
  for (let i = 0; i < files.length; i++) {
    let viewportEl = document.getElementById(`viewport${i+1}`);
    if (!viewportEl) {
      viewportEl = document.createElement('div');
      viewportEl.id = `viewport${i+1}`;
      viewportEl.style.width = '400px';
      viewportEl.style.height = '400px';
      viewportEl.style.border = '1px solid #333';
      viewportEl.style.display = 'inline-block';
      viewportEl.style.margin = '10px';
      document.body.appendChild(viewportEl);
      cornerstone.enable(viewportEl);
    }
    
    await renderDicomToViewport(`viewport${i+1}`, files[i]);
  }
});

常见问题排查 #

• 视口无渲染：检查视口元素是否有明确宽高，是否执行了cornerstone.enable()
• 加载失败：确认DICOM文件未损坏，若加载服务器文件需配置CORS
• 压缩DICOM不支持：需额外引入cornerstone-wado-image-loader的压缩解码模块（如cornerstoneWADOImageLoaderCodecs.js）

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