【从0上手cornerstone3D】如何加载nifti格式的文件

在线演示

支持加载的文件格式

  • .nii

  • .nii.gz

代码实现

js 复制代码
npm install @cornerstonejs/nifti-volume-loader
js 复制代码
// ------------- 核心代码 Start-------------------
// 注册一个nifti格式的加载器
volumeLoader.registerVolumeLoader(
  "nifti",
  cornerstoneNiftiImageVolumeLoader
);

const niftiURL =
  "https://ohif-assets.s3.us-east-2.amazonaws.com/nifti/MRHead.nii.gz";

// 在定义volumeId时使用 nifti 前缀,便于识别使用的加载器种类
const volumeId = "nifti:" + niftiURL;
await volumeLoader.createAndCacheVolume(volumeId);
// ------------- 核心代码 End-------------------

const renderingEngine = new RenderingEngine(this.renderingEngineId);
// 在渲染引擎中创建并加载视图,使视图与HTML元素绑定
const viewportId1 = "CT_AXIAL";
const viewportId2 = "CT_SAGITTAL";
const viewportId3 = "CT_CORONAL";
const viewportInputArray = [
  {
    viewportId: viewportId1,
    type: csEnums.ViewportType.ORTHOGRAPHIC,
    element: document.querySelector("#element1"),
    defaultOptions: {
      orientation: csEnums.OrientationAxis.AXIAL,
    },
  },
  {
    viewportId: viewportId2,
    type: csEnums.ViewportType.ORTHOGRAPHIC,
    element: document.querySelector("#element2"),
    defaultOptions: {
      orientation: csEnums.OrientationAxis.SAGITTAL,
    },
  },
  {
    viewportId: viewportId3,
    type: csEnums.ViewportType.ORTHOGRAPHIC,
    element: document.querySelector("#element3"),
    defaultOptions: {
      orientation: csEnums.OrientationAxis.CORONAL,
    },
  },
];
renderingEngine.setViewports(viewportInputArray);

// 在视图上设置Volume
await setVolumesForViewports(
  renderingEngine,
  [
    {
      volumeId: volumeId,
    },
  ],
  [viewportId1, viewportId2, viewportId3]
);

// 渲染图像
renderingEngine.renderViewports([viewportId1, viewportId2, viewportId3]);

问题解决

  1. 非安全上下文下,提示 SharedArrayBuffer is not defined 的问题
  • 原因:非安全模式下,SharedArrayBuffer的构造函数为隐藏的,所以在类型判断时,由于SharedArrayBuffer未声明而被使用导致ReferenceError

  • 临时解决:手动声明一个SharedArrayBuffer跳过检测

JavaScript 复制代码
window.SharedArrayBuffer = ArrayBuffer

拓展

NIfTI文件

NIfTI(Neuroimaging Informatics Technology Initiative)格式是一种广泛使用的数据格式,主要用于存储和交换神经影像学数据,尤其是在功能磁共振成像(fMRI)、结构 MRI 和 DTI(扩散张量成像)等领域。这种格式由 NIfTI 组织开发,旨在简化神经影像数据的使用和交换。

NIfTI 文件的主要特点:

支持 3D 和 4D 数据

NIfTI 文件能够存储三维影像数据(如单个时间点的 MRI 扫描)以及四维数据(如随时间变化的系列扫描)

包含数据和头信息:

每个 NIfTI 文件不仅包含影像像素或体素的原始数据,还包含了描述这些数据的元数据(头信息)。这些信息包括维度、空间定位、数据类型、单位(如毫米和秒)等。

两种文件格式:

单文件(.nii)格式,将数据和头信息存储在一个文件中。

双文件(.hdr 和 .img)格式,分别存储头信息和数据。

支持数据压缩:

NIfTI 文件可以被压缩以减少空间,通常以 .nii.gz 的格式出现。

灵活性和兼容性:

NIfTI 格式旨在兼容旧的 ANALYZE 7.5 格式,同时增加新的功能。它被设计为足够灵活,以适应不断发展的医学影像技术。

相关推荐
代码搬运媛4 小时前
Jest 测试框架详解与实现指南
前端
counterxing5 小时前
我把 Codex 里的 Skills 做成了一个 MCP,还支持分享
前端·agent·ai编程
wangqiaowq5 小时前
windows下nginx的安装
linux·服务器·前端
之歆6 小时前
DAY_12JavaScript DOM 完全指南(二):实战与性能篇
开发语言·前端·javascript·ecmascript
发现一只大呆瓜6 小时前
Vite凭什么这么快?3分钟带你彻底搞懂 Vite 热更新的幕后黑手
前端·面试·vite
Maimai108086 小时前
React如何用 @microsoft/fetch-event-source 落地 SSE:比原生 EventSource 更灵活的实时推送方案
前端·javascript·react.js·microsoft·前端框架·reactjs·webassembly
kyriewen8 小时前
产品经理把PRD写成“天书”,我用AI半小时重写了一遍,他当场愣住
前端·ai编程·cursor
humcomm8 小时前
元框架的工作原理详解
前端·前端框架
canonical_entropy8 小时前
Attractor Before Harness: AI 大规模开发的方法论
前端·aigc·ai编程
zhangxingchao9 小时前
多 Agent 架构到底怎么选?从 Claude Agent Teams、Cognition/Devin 到工程落地原则
前端·人工智能·后端