cornerstone Core 基础概念(一)

Cornerstone Core，它是一个轻量级 JavaScript 库，用于在支持 HTML5 画布元素的现代 web 浏览器中显示医学图像。Cornerstone Core 并不意味着是一个完整的应用程序本身，而是一个可以作为更大、更复杂应用程序的一部分使用的组件。

下面将介绍 Cornerstone Core 中的基本概念与 API，以便后续了解 Cornerstone Core 的用法。

Enabled Elements

在 Cornerstone 中，启用的元素是 HTMLElement（通常是 div），我们在其中显示交互式医学图像。

const element = document.getElementById("dicom_container");
cornerstone.enable(element);

Image Ids

cornerstone Image Id 是标识基石要显示的单个图像的 URL。也是图像的唯一标识，所有的操作处理都是基于这个唯一标识进行识别。

Cornerstone 使用图像 Id 中的 URL 方案来确定要调用哪个图像加载程序插件来实际加载图像。该策略允许 Cornerstone 同时显示使用不同协议从不同服务器获得的多个图像。

imageLoader 通过识别 scheme name 选择加载器，常见 imageId：

// wadouri - HTTP GET
const wadouriImageId =
  "wadouri:http://localhost:3333/wado?requestType=WADO&studyUID=1.3.6.1.4.1.25403.166563008443.5076.20120418075541.1&seriesUID=1.3.6.1.4.1.25403.166563008443.5076.20120418075541.2&objectUID=1.3.6.1.4.1.25403.166563008443.5076.20120418075557.1&contentType=application%2Fdicom&transferSyntax=1.2.840.10008.1.2.1";

// dicomweb - HTTP GET
const dicomwebImageId =
  "dicomweb:http://localhost:3333/wado?requestType=WADO&studyUID=1.3.6.1.4.1.25403.166563008443.5076.20120418075541.1&seriesUID=1.3.6.1.4.1.25403.166563008443.5076.20120418075541.2&objectUID=1.3.6.1.4.1.25403.166563008443.5076.20120418075557.1&contentType=application%2Fdicom&transferSyntax=1.2.840.10008.1.2.1";

// wadors - RESTful 风格 HTTP GET
const wadorsImageId =
  "wadors:https://api.hackathon.siim.org/dicomweb/studies/1.3.6.1.4.1.14519.5.2.1.7777.9002.198875685720513246512710453733/series/1.3.6.1.4.1.14519.5.2.1.7777.9002.207203214132667549392101803048/instances/1.3.6.1.4.1.14519.5.2.1.7777.9002.327873213718058651550666129029/frames/1";

// dicomfile - 本地文件
const dicomfileImageId = "dicomfile:1";

CornerstoneWADOImageLoader 中的 wadouri 关于 scheme name 的判断：

function getLoaderForScheme(scheme) {
  if (scheme === "dicomweb" || scheme === "wadouri") {
    // 如果是scheme时dicomweb或wadouri时，采用ajxs请求
    return xhrRequest;
  } else if (scheme === "dicomfile") {
    // 如果scheme为dicomfile时，则采用本地文件加载方式
    return loadFileRequest;
  }
}

Image Loaders

Image Loaders 是一个 JavaScript 函数，负责获取图像的 image id，并将该图像的相应图像加载对象返回给 Cornerstone。Image Load 对象包含解析为生成图像的 Promise。

Image Loaders 的工作流程：

ImageLoader 向 cornerstone 注册，以加载特定的 ImageId URL 方案。ImageLoader 是开放性的，允许开发者自定义图像加载器，但是需要在 cornerstone 中注册才可使用。 CornerstoneWADOImageLoader 中的 wadouri 和 wadors 关于注册的代码，这是自动注册的：

export default function(cornerstone) {
  // register dicomweb and wadouri image loader prefixes
  cornerstone.registerImageLoader('dicomweb', loadImage);
  cornerstone.registerImageLoader('wadouri', loadImage);
  cornerstone.registerImageLoader('dicomfile', loadImage);

  // add wadouri metadata provider
  cornerstone.metaData.addProvider(metaDataProvider);
}

export default function(cornerstone) {
  // register wadors scheme and metadata provider
  cornerstone.registerImageLoader('wadors', loadImage);
  cornerstone.metaData.addProvider(metaDataProvider);
}

自定义加载器注册方式：

function loadImage(imageId) {
  // 解析imageId并返回可用的URL
  const url = parseImageId(imageId);

  const promise = new Promise((resolve, reject) => {
    // 生成dicom请求数据
    const oReq = new XMLHttpRequest();
    oReq.open("get", url, true);
    oReq.responseType = "arraybuffer";
    oReq.onreadystatechange = function (oEvent) {
      if (oReq.readyState === 4) {
        if (oReq.status == 200) {
          // 请求成功后，创建图像对象
          const image = createImageObject(oReq.response);

          resolve(image);
        } else {
          reject(new Error(oReq.statusText));
        }
      }
    };

    oReq.send();
  });

  return {
    promise,
  };
}

// 注册 myCustomLoader 以对应的 loadImage 函数
cornerstone.registerImageLoader("myCustomLoader", loadImage);

// 通过 imageId 获取图像
cornerstone.loadImage("myCustomLoader:http://example.com/image.dcm");

Viewports

每个启用的元素都有一个视口，用于描述应如何渲染图像。

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

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

// 设置视口对象
cornerstone.setViewport(element, viewport);

viewport 对象包含信息：

属性名称	描述	值类型
scale	图像的缩放比例。等于 1 时不进行缩放，一个图像像素占用一个屏幕像素，大于 1 时将放大，小于 1 时缩小。	Number
translation	在像素坐标系中的平移距离，具有属性 x 和 y 的对象。	Object
voi	窗宽窗位，具有属性 windowWidth 和 windowCenter 的对象。	Object
invert	图像是否进行颜色反转。	Boolean
pixelReplication	放大图像时是否使用图像平滑	Boolean
hflip	图像是否水平翻转	Boolean
vflip	图像是否垂直翻转	Boolean
rotation	图像的旋转角度	Number
modalityLUT	应用的 modalityLUT	Array
voiLUT	应用的 voiLUT	Array
colormap	应用的伪彩色对象	Object
labelmap	将此图像渲染为 labelmap，直接跳过 modalityLUT 和 voiLUT	Boolean
displayedArea	显示区域信息，具有属性 tlhc、brhc（显示区域位于启用元素的坐标）、columnPixelSpacing、rowPixelSpacing（像素间距）的对象。	Object

Images

图像加载程序返回图像对象。

// 显示图像前
const imageId =
  "dicomweb:https://tools.cornerstonejs.org/examples/assets/dicom/bellona/chest_lung/1.dcm";
const image = await cornerstone.loadImage(imageId);

// 显示图像后
const element = document.getElementById("dicom_container");
const image = cornerstone.getImage(element);

image 对象包含信息：

属性名称	描述	值类型
imageId	与此图像对象关联的 imageId。	String
minPixelValue	图像中存储的最小像素值，一般来自 tag 信息（0028, 0106），如果未指定，则会根据 PixelData 重新计算。	Number
maxPixelValue	图像中存储的最大像素值，一般来自 tag 信息（0028, 0107），如果未指定，则会根据 PixelData 重新计算。	Number
slope	重新缩放斜率，将存储的像素值转换为模态像素值，一般来自 tag 信息（0028, 1053），如果未指定，则为 1。	Number
intercept	重缩放截距用于将存储的像素值转换为模态值，一般来自 tag 信息（0028, 1052），如果未指定，则为 0	Number
windowCenter	图像的默认窗位，一般来自 tag 信息（0028, 1050）。	Number
windowWidth	图像的默认窗宽，一般来自 tag 信息（0028, 1050）。	Number
getPixelData	底层像素数据的函数，返回灰度的整数数组和颜色的 RGBA 数组。	Function
rows	图像中的行数，一般指图像的高度，一般来自 tag 信息（0028, 0010）。	Number
columns	图像中的列数，一般指图像的宽度，一般来自 tag 信息（0028, 0011）。	Number
height	图像的高度，与 rows 同值。	Number
width	图像的宽度，与 columns 同值。	Number
color	是否为彩色图像，一般来自 tag 信息（0028, 0004），对值进行多项判断得到。	Boolean
columnPixelSpacing	垂直像素间距，一般来自 tag 信息（0028, 0030），如果未指定，则为 1。	Number
rowPixelSpacing	水平像素间距，一般来自 tag 信息（0028, 0030），如果未指定，则为 1。	Number
invert	是否反转显示，一般来自 tag 信息（0028, 0004），值为 MONOCHROME1 则为 true，反之为 false。	Boolean
sizeInBytes	用于存储此图像像素的字节数。	Number
stats	上次重新绘制图像关于性能的统计信息，主要是一些耗时统计，例如：上一次获取像素数据的时间等。	Object
cachedLut	图像的缓存信息，主要是一些初始的信息，例如：原始窗宽窗位等。	Object