cornerstone 影像基本操作

本章将详细介绍如何使用 cornerstone 进行医学影像的加载显示与一些基本的影像操作。

装载元素

在使用 cornerstone 进行影像加载之前，需要装载 element 元素，来确定要显示的影像。

const element = document.getElementById("#enabledElement");

cornerstone.enable(element);

下载 dicom 文件

在 cornerstone 中提供了 dicom 文件下载的功能，我们只需要将文件路径传入即可。

const imageId =
  "wadouri:http://182.92.128.9/file-system-online/dicom/CT/chest_lung/1/1.dcm";

// 下载影像
cornerstone.loadImage(imageId);
// 或者，下载并缓存影像
cornerstone.loadAndCacheImage(iamgeId);

显示影像

loadImage 或者 loadAndCacheImage 会返回解析影像后的 image 对象，就可以调用 diaplayImage 方法进行影像的显示。

const element = document.getElementById("#enabledElement");
const imageId =
  "wadouri:http://182.92.128.9/file-system-online/dicom/CT/chest_lung/1/1.dcm";

/**
 * 此处需要注意的是：
 * loadImage 或者 loadAndCacheImage 方法会返回 Promise 对象，
 * 需要通过 then 或者 await/async 去接收 image 对象
 */
cornerstone.loadImage(imageId).then((image) => {
  cornerstone.diaplayImage(element, image);
});

影像翻转

加载完成影像后，可以通过 viewport 视口中的 hflip 与 vflip 属性，对影像进行水平或者垂直方向的翻转。两个属性默认值均为 false ，也就是不进行翻转。

// 获取当前的视口对象
const element = document.getElementById("enabledElement");
const viewport = cornerstone.getViewport(element);

// 切换水平方向的翻转
viewport.hflip = !viewport.hflip;
// 切换垂直方向的翻转
viewport.vflip = !viewport.vflip;
// 设置新的视口
cornerstone.setViewport(element, viewport);

影像反色

在 viewport 视口中，可以通过 invert 属性进行影像的反色。默认值为 false ，不进行反色。

const element = document.getElementById("enabledElement");
const viewport = cornerstone.getViewport(element);

// 切换反色
viewport.invert = !viewport.invert;
// 设置新的视口
cornerstone.setViewport(element, viewport);

影像过渡采用平滑或差值

在影像进行缩放操作时，一般采用会采用平滑的方式，这样渲染出来的图像像素间的过渡会更加的细腻清晰。在 viewport 视口中，通过 pixelReplication 属性进行平滑与差值的切换。实际 pixelReplication 会应用到 canvas 的 imageSmoothingEnabled 属性（抗锯齿）上。默认值为 true ，采用平滑的方式。

const element = document.getElementById("enabledElement");
const viewport = cornerstone.getViewport(element);

// 切换平滑与差值
viewport.pixelReplication = !viewport.pixelReplication;
// 设置新的视口
cornerstone.setViewport(element, viewport);

影像缩放

在 viewport 视口中，通过 scale 属性进行缩放比例的调整。默认值为 cornerstone 自动计算后的适应当前 enabledElement 的尺寸，即铺满的状态的值。

const element = document.getElementById("enabledElement");
const viewport = cornerstone.getViewport(element);

// 调整缩放比例
// 原始大小，一个图像像素占一个屏幕像素
viewport.scale = 1;
// 放大两倍
viewport.scale = 2;
// 缩小两倍
viewport.scale = 0.5;
// 设置新的视口
cornerstone.setViewport(element, viewport);

影像旋转

在 viewport 视口中，通过 rotation 属性进行旋转的调整。默认值为 0，不进行旋转。

const element = document.getElementById("enabledElement");
const viewport = cornerstone.getViewport(element);

// 调整旋转角度
// 顺时针旋转90度
viewport.rotation = 90;
// 逆时针旋转90度
viewport.rotation = -90;
// 设置新的视口
cornerstone.setViewport(element, viewport);

影像自适应

在实际的使用过程中，在调整布局方式后，会影响 enabledElement 的尺寸，但是实际渲染的影像并没有进行相应的调整，导致出现了滚动条或者部分留白。在 cornerstone 中，可以通过 resize 方法不断调整实际影像的尺寸来解决这个问题。

const element = document.getElementById("enabledElement");

// 执行自适应方法
cornerstone.resize(element);

另外，当窗口变化时，可以通过监听 resize 事件，进行自动调整。

const element = document.getElementById("enabledElement");

// 通过监听 window 的 resize 事件，进行适应操作
window.addEventListener("resize", () => {
  cornerstone.resize(element);
});

影像视口重置

当需要把调整的 viewport 视口恢复到初始状态，即重置影像，可以通过 reset 方法。

const element = document.getElementById("enabledElement");

// 执行重置方法
cornerstone.reset(element);

viewport 视口的重置，还可以通过设置默认视口的方式实现：

const element = document.getElementById("enabledElement");
// 获取已装载元素的对象
const enabledElement = cornerstone.getEnabledElement(element);

// 获取默认的视口对象赋值给当前的视口
enabledElement.viewport = cornerstone.getDefaultViewport(
  enabledElement.canvas,
  enabledElement.image
);

// 刷新影像
cornerstone.updateImage(element);

最简单的例子

老规矩，最后放上案例，更直观的看到效果。