cornerstone 之 MPR(多平面重建) 的简单实现

1,254 阅读3分钟

cornerstone 之 MPR(多平面重建) 的简单实现

MPR 介绍

MPR (MultiPlanar Reconstruction) 技术是一种医学影像处理技术,它可以将三维医学影像数据转换为在不同平面上显示的二维图像。该技术常用于 CT、MRI 等成像模态中,通过选择不同的重建算法,可以在冠状面(Sagittal plane)、矢状面(Coronal plane)和轴状面(Axial plane)等多个平面上呈现图像,从而提高医生对患者内部组织结构的观察和诊断水平。

MPR-graphic.png

MPR 的优点:

  • 能任意产生新的断层图像,无需重复扫描。
  • 原图像的密度值被忠实的保持到了结果图像上。
  • 曲面重组能在一幅图像里展开显示弯曲物体的全长。

MPR 的缺点:

  • 难以表达复杂的空间结构。
  • 曲面重组易造成假阳性。

cornerstone 中的 MPR 工具

很遗憾,cornerstone.js 仅支持 2D 成像,MPR 相关的功能,还需要借助其它三方库去实现。目前,我们仅展示一种简单的实现方式,借助 cornerstoneSideImageLoader 进行切片,通过轴向图像获取到冠状与矢状图像。

cornerstoneSideImageLoader 库虽然名字中带有 cornerstone ,并实际不是 cornerstone 家族中的一员,下面我们将详细介绍具体的使用方式。

cornerstoneSideImageLoader 安装

npm i cornerstone-side-image-loader

如使用其它包管理器,请自行转换命令。

cornerstoneSideImageLoader 主要的 API

首先,为了不过分增加大家的心智负担,我们只简单介绍下 cornerstoneSideImageLoader 中主要的 API,这些主要的 API 已经足够我们来实现 MPR 功能:

// 配置 cornerstoneSideImageLoader 内部使用的 cornerstone 为指定版本
cornerstoneSideImageLoader.external.cornerstone = cornerstone;
/**
 * @description 生成冠状面与矢状面影像
 * @param {Array} images cornerstone.loadAndCacheImage 或 cornerstone.loadImage 返回的 image 对象的集合
 * @return {Object} 包含冠状面图像 id 集合:coronalImageIds与矢状面图像 id 集合:sagittalImageIds
 */
const { coronalImageIds, sagittalImageIds } =
  cornerstoneSideImageLoader.generateSideImages(images);

generateSideImages 主要作用为计算冠状面与矢状面的影像数据,生成相对应的 imageIds。该处需要注意的是,需要将轴状位的全部影像加载完成后,所有轴状位的影像全部生成元数据后才能计算其它两面的数据。

function loadAxialImage() {
  const imageIds = [];

  return Promise.all(
    imageIds.map((imageId) => cornerstone.loadAndCacheImage(imageId))
  );
}

async function loadSideImage() {
  const image = await loadAxialImage();
  const { coronalImageIds, sagittalImageIds } =
    cornerstoneSideImageLoader.generateSideImages(images);
}
/**
 * @description 根据 imageId 获取 image 对象
 * @param {String} imageId 影像的 id
 * @returns {Object} image 对象
 */
const image = cornerstoneSideImageLoader.getImageInImageLoaderCache(imageId);

getImageInImageLoaderCache 主要作用为获取当前切片影像的 image 对象,为后续操作提供支持。

/**
 * @description 清空 imageLoader 缓存
 * @returns {void}
 */
cornerstoneSideImageLoader.resetImageLoaderCache();

resetImageLoaderCache 主要作用为清理 imageLoader 在浏览器中的缓存,在关闭 MPR 功能时使用,防止过多占用内存。

cornerstoneSideImageLoader 具体的使用

首先,我们首先一个 render 函数,来具体实现轴状面、冠状面与矢状面的影像加载:

async function render(element, imageIds) {
  // 激活元素
  cornerstone.enable(element);
  
  // 加载并显示序列的首张影像
  const image = await cornerstone.loadAndCacheImage(imageIds[0]);

  cornerstone.displayImage(element, image);

  // 循环加载序列中的全部影像
  return Promise.all(
    imageIds.map((imageId) => cornerstone.loadAndCacheImage(imageId))
  );
}

然后在通过 render 函数加载三个面的影像:

async function loadImage() {
  const axial = document.getElementById("axial");
  const coronal = document.getElementById("coronal");
  const sagittal = document.getElementById("sagittal");
  const imageIds = ["假如数组中有很多 imageId"];
  const images = await render(axial, imageIds);
  const { coronalImageIds, sagittalImageIds } =
    cornerstoneSideImageLoader.generateSideImages(images);
    
  await render(coronal, coronalImageIds);
  await render(sagittal, sagittalImageIds);
}

如果,需要添加一些 cornerstonetools 的工具,可以在直接添加到 render 函数中。

最简单的例子

老规矩,最后放上案例,以便更加直观查看代码。由于受网络资源的影响,加载网络 DICOM 文件可能较慢,请耐心等候全部 DICOM 下载完成后,在查看案例。