关于前端:cornerstone-Core-基础概念一

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 对象蕴含信息：

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 对象蕴含信息：