CornerstoneJs基础概念篇

Cornerstone 是一个开源项目，其目标是提供一个完整的基于网络的医学成像平台。

关键特性

基于HTML5/Javascript的库，可以轻松地将交互式医学图像添加到web应用程序中
作为从企业查看器、报告查看器登构建更复杂医疗成像应用程序的基础
支持所有基于HTML5的浏览器，包括手机、平板电脑和台式机
显式所有常见的医学图像格式（例如8位灰度、16位灰度、RGB颜色）
高性能图像显示（例如通过webworker）
通过图像加载器插件设计从具有不同协议的不同系统检索图像
API支持更改视口属性（例如ww/wc、缩放、平移、反转）
仅支持2D成像

Concepts 概念

Enabled Elements

通过网页中的脚本标记引用 Cornerstone JavaScript 库文件
引用一个或多个图像加载器的 JavaScript 文件，Cornerstone 将使用该加载器在网页中实际加载像素数据（例如 WADO、WADO-RS、自定义）
将一个元素添加到 DOM 中，该元素将用于显示其中的图像
使用 CSS 将元素定位在页面上以及所需的宽度和高度
调用enable() API准备元素显示图像
使用 loadImage() API 加载图像

使用 displayImage() API 显示加载的图像

<body>
...
  <div id='dicomImage'></div>
...
<body>
<script>
import cornerstone from "cornerstone-core";
import * as imageLoader from "cornerstone-nifti-image-loader";

let element = document.getElementById('dicomImage');
let imageId = 'example://1';
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
  cornerstone.displayImage(element, image);
  ...
})
</script>

Image Ids
- Cornerstone 图像 ID 是一个 URL，用于标识要显示的 Cornerstone 的单个图像。
Image Loaders
- 图像加载器是一个 JavaScript 函数，负责获取图像的图像 ID 并将该图像对应的图像加载对象返回到 Cornerstone。图像加载对象包含一个 Promise，该 Promise 解析为生成图像。
- Available Image Loader
  - Cornerstone WADO Image Loader
    - Supports WADO-URI and WADO-RS
    - Supports reading DICOM files from the File objects
    - Supports multi-frame DICOM instances
  - Cornerstone Web Image Loader
    - PNG and JPEG images

Viewports

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

启用元素的视口参数可以通过 getViewport() 函数获取，并使用 setViewport() 函数设置。

属性	类型	说明
scale	number	图像缩放比例，可以是小数
translation	vec2	图像在像素坐标系中的平移，vec2是一个二维向量，通俗点就是包含x和y属性的对象。如：{x: 0, y: 0}
voi	VOI	VOI(Volum of Interest)表示图像中感兴趣区域的对象，如：{windowWidth: 0, windowCenter: 0}
invert	boolean	灰度倒置
pixelReplication	boolean	指定图像放大时的算法，像素复制，插值算法
hflip	boolean	图像水平翻转
vflip	boolean	图像垂直翻转
rotation	number	图像旋转角度
modalityLUT	LUT	配置格式如：{firstValueMapped: 0, numBitsPerEntry: 0, lut: []}
voiLUT	LUT	同上
colormap	string	给图像上色
labelmap	boolean	是否使用labelmap渲染图像

DICOM医学图像显示转换过程需要经过Modality LUT、VOI LUT、Presentation LUT三个转换过程，最终输出的P Values才是可以直接显示的图像数据

Images

图像加载器返回一个图像对象。

属性	类型	说明
imageId	string	标记图像的自定义url地址
minPixelValue	Number	最小像素值，灰度图片的话就是最小灰度值
maxPixelValue	Number	最大像素值
slope	Number	斜率，将存储的像素值转换为成像设备像素值，未指定默认1
intercept	Number	截距，配合slope转换像素值，未指定默认为0
windowCenter	Number	图像中心
windowWidth	Number	图像宽度
getPixelData	function	获取像素数据的函数
getImageData	function	获取canvas imageData的函数
getCanvas	function	获取canvas element的函数
getImage	function	获取JavaScript Image object对象的函数
rows	Number	行数，同height
columns	Number	列数，同width
height	Number	图像高度
width	Number	图像宽度
color	Boolean	True表示像素数据为RGB，False表示像素数据为灰度
lut	Object	The Lookup Table查找表
rgba	Boolean	True表示色彩像素数据，存储在rgba
columnPixelSpacing	Number	像素之间的水平距离
rowPixelSpacing	Number	像素之间的垂直距离
invert	Boolean	True表示以反转灰度显示
sizeInBytes	Number	用以存储此图像像素的字节数
falseColor	Boolean	图像是否经过位色彩映射
origPixelData	Array	经伪色彩映射的图像原始像素数据
stats	ImageStats	最新图像重绘统计信息
cachedLut	Object	缓存查找表
colormap	String\|Colormap	选择使用的伪彩ID
labelmap	Boolean	是否将此图像呈现为标签映射

Pixel Coordinate Sysytem
- 像素坐标系用于引用图像中的各个像素并支持子像素精度。坐标系的原点是这样的：0.0,0.0 是图像中左上角像素的左上角，列、行是图像中右下像素的右下角。因此，坐标 0.5,.5 是左上角像素的中心。
- 函数 pageToPixel() 可用于将从浏览器事件获取的坐标转换为像素坐标系中的坐标。
- 函数 setToPixelCooperativeSystem() 可用于将画布上下文设置为像素坐标系。当处理 CornerstoneImageRendered 事件以在图像顶部绘制几何体时，这非常有用。
- 该坐标系与 DICOM 灰度软拷贝呈现状态图形注释模块中为使用 PIXEL 注释单元绘制的图形指定的坐标系相匹配。
- 使用 Math.ceil() 将像素坐标系转换为整数像素数（用于在像素数据中查找像素值）。
Rendering Loop
- 启用元素的视口（例如开窗、平移、缩放等）更改通过基于 requestAnimationFrame 的渲染循环进行更新。

Libraries

Cornerstone 是一个开源项目，其目标是提供一个完整的基于网络的医学成像平台。它提供了可以一起或独立使用的模块化库。

cornerstone Core	提供图像渲染、加载、缓存和视口转换的中央库
cornerstone Tools	对构建工具的可扩展支持，对鼠标、键盘和触摸设备的支持。
cornerstone Math	支持工具开发的数学实用函数和类
cornerstone WADO Image Loader	用于通过 HTTP（WADO-URI）或 DICOMWeb（WADO-RS）的 DICOM P10 实例的图像加载器
dicomParser	强大的 DICOM Part 10 解析库
Hammer.js	添加对触摸事件和手势的跨浏览器支持

Rendering Pipeline

Cornerstone 将根据图像类型（例如灰度、颜色、标签图、视口伪彩色）从多个图像渲染管道中进行选择。

Rendering Pipeline Workflow

Rendering path	Description
renderGrayscaleImage 渲染灰度图像	灰度图像的默认渲染管道。包括模态和 VOI LUT 转换。
renderPseudoColorImage 渲染伪彩色图像	设置 Viewport 颜色图属性时使用。这会将伪彩色 LUT 变换应用于模态 LUT 和 VOI LUT 变换之后的像素数据。
renderColorImage 渲染颜色图像	彩色图像的默认渲染管道。除非图像的 rgba 属性设置为 true，否则所有像素的 Alpha 都保持不透明。
renderWebImage 渲染Web图像	用于浏览器加载的图像（PNG、JPEG）的自定义渲染管道。如果未应用 VOI LUT 转换（windowWidth、windowCenter、invert），则可以直接从 Image getImage 函数绘制画布。
renderLabelMapImage 渲染标签映射图像	标签图的渲染管道。伪彩色 LUT 变换直接应用于存储的像素数据。不应用模态或 VOI LUT 转换。

Metadata Providers

元数据提供程序是一个 JavaScript 函数，充当访问与 Cornerstone 中的图像相关的元数据的接口。用户可以定义自己的提供程序函数，以便返回他们想要的每个特定图像的任何元数据。

function metaDataProvider(type, imageId)
  if (type === 'imagePlaneModule') {
    if (imageId === 'ct://1') {
        return {
            frameOfReferenceUID: 
"1.3.6.1.4.1.5962.99.1.2237260787.1662717184.1234892907507.1411.0",
            rows: 512,
            columns: 512,
            rowCosines: {
                x: 1,
                y: 0,
                z: 0
            },
            columnCosines: {
                x: 0,
                y: 1,
                z: 0
            },
            imagePositionPatient: {
                x: -250,
                y: -250,
                z: -399.100006
            },
            rowPixelSpacing: 0.976562,
            columnPixelSpacing: 0.976562
        };
    }
  }
}
// Register this provider with CornerstoneJS
cornerstone.metaData.addProvider(metaDataProvider);
// Retrieve this metaData
var imagePlaneModule = cornerstone.metaData.get('imagePlaneModule', 'ct://1');