关于前端: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 GETconst 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 GETconst 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 GETconst 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 对象蕴含信息：