《基于 Vue3 + Cornerstone3D 的 DICOM 阅片功能实现》

基于 Vue3 + Cornerstone3D 的 Web DICOM 阅片与三维重建

背景介绍

使用 Vue3 + TypeScript + Cornerstone3D 开发了一套 Web DICOM 浏览器，除了基本的二维阅片，还实现了 三维重建功能。

主要解决的问题：

1. DICOM 文件以及SR在浏览器中的加载与显示。
2. 常见交互操作（缩放、拖动、调窗）。
3. 三维重建的实现与优化，保证在普通电脑和移动端也能流畅运行。

---

在线演示

👉 在线体验地址

支持在 PC 和手机端 打开，可以查看 二维平片 和 三维重建。

效果截图

1. 手机端 – 二维平片

1. 手机端 – 三维重建

1. PC端 – 二维平片

1. PC端 – 三维重建

---

技术栈与依赖

• Vue 3：构建整体前端框架。
• TypeScript：提升代码可维护性和类型安全。
• Cornerstone3D：负责 DICOM 文件的加载与渲染。
• Element Plus / Vant（可选）：作为 UI 组件库。

---

核心代码片段

1. 加载 DICOM 图像

import { imageLoader } from '@cornerstonejs/core';

async function loadDicomImage(imageId: string) {
  const image = await imageLoader.loadAndCacheImage(imageId);
  return image;
}

2. 初始化二维阅片视图

import { RenderingEngine, Enums } from '@cornerstonejs/core';

const renderingEngineId = 'myRenderingEngine';
const renderingEngine = new RenderingEngine(renderingEngineId);

renderingEngine.enableElement({
  viewportId: 'CT_AXIAL',
  element: document.getElementById('dicomCanvas') as HTMLDivElement,
  type: Enums.ViewportType.STACK,
});

3. 三维重建（Volume Rendering）

import { volumeLoader, Enums } from '@cornerstonejs/core';

async function init3DVolume(imageIds: string[]) {
  const volume = await volumeLoader.createAndCacheVolume(imageIds);

  renderingEngine.enableElement({
    viewportId: '3D_VIEW',
    element: document.getElementById('dicom3D') as HTMLDivElement,
    type: Enums.ViewportType.VOLUME_3D,
  });

  const viewport = renderingEngine.getViewport('3D_VIEW');
  viewport.setVolumes([volume]);
  viewport.render();
}

---

总结与展望

这套 Web DICOM 浏览器目前已经实现了：

• 二维平片显示和常见交互操作；
• 三维重建展示；
• SR结构化报告以及大尺寸dicom文件显示。
• 移动端和 PC 的兼容支持。

这份代码和演示希望能帮助更多开发者快速上手 Web DICOM 阅片的实现思路，也欢迎交流与改进建议。