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