JS编写的医疗DICOM影像浏览工具

        概况来讲，Cornerstone是一套JavaScript底层组件，用于支持医学影像的显示与交互；OHIF Viewer是一套基于Cornerstone开发的纯 页版医学影像浏览前端。如同它的名字一样，Cornerstone为医学影像Web前端开发提供基石；OHIF Viewer则是基于这套基石开发的Web前端应用。
        简单来说，Cornerstone是底层基石，OHIF Viewer是上层应用。
此外，在Cornerstone之上，还封装开发了一个更高层级的工具组件库Cornerstone Tools；而与OHIF Viewer并列，还有一个LesionTracker，用于病灶随访对比。这里也将一并简单介。

Cornerstone

先来说一说Cornerstone这个基石。如果想直观感受这个基石的威力和这个“轮子”的方便程度，可以直接打开这个 站：https://cornerstonejs.org/

站首页直接展示了一个编程示例，对应的代码如下。可以看到，只用了13行代码（核心代码11行）就在 页上嵌入显示了一幅DICOM影像，并且支持包括缩放、平移、灰窗这些基础图像交互操作。

站首页还用一句Slogan直接给出Cornerstone的使命，原文摘抄如下：

Medical Imaging, Simplified.——The easiest way to build interactive medical imaging web applications.

Cornerstone从设计到实现，具有三大特性：

• 标准兼容——支持DICOM影像解析，来实现图像 页显示；支持DICOMweb中的WADO-URI和WADO-RS接口，来实现图像 页获取。
• 高性能——采用 页端多线程解码，来加速图像显示。这一点对于互联 应用采用JPEG等压缩方式来传输图像非常有帮助。
• 可扩展——采用模块化（组件）设计，能够嵌入不同前端架构。例如目前最流行的React架构。

根据目前了解到的，Cornerstone从代码实现到落地应用，确确实实实现了它提出的目标和愿景。

Cornerstone Examples

要想更详细了解Cornerstone提供了哪些具体功能，下方的 页是最佳去处。 页提供了一整套示例，可以直接点击查看和体验。

https://rawgit.com/cornerstonejs/cornerstone/master/example/index.html

这里选择两个典型例子，把 页截图分享给大家。只是截图无法互动操作，体验还是受到比较大影响。

例子一：All features (scroll, zoom, pan, window/level, html overlays, resize, invert, interpolation)

例子二：Composite Images

概况起来，Cornerstone覆盖了：

• 图像加载、显示、缓存、插值，以及OpenGL渲染
• 支持灰度映射表，包括设备映射表和感兴趣区映射表
• 支持显示状态，Presentation State
• 窗宽窗位、反色、缩放、平移、翻转、旋转
• 伪彩显示、融合显示、图层Overlay
• 页面内图像布局
• 序列图像浏览Cine

想要了解更多/strong>

源代码：https://github.com/cornerstonejs/cornerstone

在线文档：https://docs.cornerstonejs.org/

cornerstone.js学习

目前官方文档都是全英文，但是本人比较建议从cornerstone.js github中的wiki入手先了解基本概念和api。

cornerstone-wiki

首先了解一下cornerstone的几大基本概念

1. Enabled element —–激活元素
2. ImageIds —–图片id
3. ImageLoaders —-图片加载器
4. Image Object —-图片对象
5. Viewport —-视图
6. Pixel Coordinate System —-图像坐标系
7. Architecture —-架构
8. Rendering loop —-主渲染循环

下面我们一个个理解

Enabled Element（激活元素）

激活的元素是一个HTML DOM node,一般来说是一个div标签。然后如果想要展示一张dicom影像图片，需要做下面几件事情：

1. 通过script标签引入cornerstone.js文件
2. 为一个或多个图片加载器写JS代码，让cornerstone可以在 页上展示图片的实际像素
3. 把一个用于展示图片的element添加到页面中，用css定义宽高位置等样式
4. 调用enable()api，让element可以渲染图片
5. 使用loadImage()api加载图片，使用displayImage()api渲染图片

如果想让展示的图片能够实现一些基础的交互，你需要做到如下几步：

1. 指定viewport的窗口宽度和高度、放大缩小、平移等参数。vIE我port的参数可以在调用displayImage()的时候设定，也可以后面通过调用setViewport()设置
2. 监听CornerstoneImageRendered event，可以在渲染的影像上画画
3. 监听CornerstoneViewportUpdated event，可以感知图像视口属性的变化
4. 实现一个自定义ImageLoader，它可以检索存储在非标准容器或非标准协议中的图像
5. 当DOM的大小变化的时候，可以通过调用resize() api通知cornerstone

ImageIds （图片id标识）

cornerstone的imageid是定义了一张展示图片的url,它imageLoader插件决定加载哪一张图片的唯一标识。这种策略可以让cornerstone同时展示多个通过不同服务器以不同协议得到的图片。比如：cornerstone可以将通过WADO获得的DICOM CT图像与由数码相机捕获并存储在文件系统中的JPEG皮肤病学图像一起显示。

cornerstone没有指定URL的内容是什么-它是由ImageLoader来定义URL的内容所以也方便定位。可以编写一个专有的ImageLoader插件来与专有服务器对话，并使用GUID、文件名或数据库行id来查找图像。

一些不同imagesid路径

WADO

A ‘dicomcget’ image loader could work with a server to issue a DICOM CGET command to retrieve the image and then return it to cornerstone:

ImageLoader （图片加载器）

Image Loader是一个JavaScript函数，负责获取图像Id，并将对应的图像加载对象返回给Cornerstone

加载图片通常需要请求服务器，而且加载图片的api需要是异步的。cornerstone要求imageloaders返回一个包含promise的对象，并通过这个对象来异步请求image对象。

image Loader Workflow

1.image loaders 向cornerstone注册自己，去加载特定的imageid url schemes

1. 应用程序通过loadimage() 这个api去请求加载一个image
2. Cornerstone委托请求加载图片的这件事给使用了URL scheme规范的imageID 的image loader，该模式把参数传给了loadImage（）这个方法
3. imageloader将会返回一个包含Promise的imageload 对象，这个对象将会在对应的图像对象获得了像素信息之后resolve。获取像素数据可能需要使用XMLHttpRequest调用远程服务器，解压这个像素信息，并且转换为一种cornerstone可以理解的格式信息。
4. 然后使用displayImage() API展示由解析过后的Promise传递回来的图像对象。

Cornerstone Tools

Cornerstone的开发团队同时还开发并且开源了Cornerstone tools。这个可以看做是在Cornerstone之上开发的一组工具集合，是界于底层库和上层应用之间的一个中间层。团队开发这个工具库的主要目的，一方面是为了进一步减轻大家在开发医疗影像前端时的工作量，另一方面，也是为了能够保证所有的工具，尤其是界面交互工具，都保持良好一致性。

回顾上面Cornerstone覆盖的功能范围，可以发现，还缺少影像软件都必备的标注和测量功能。Cornerstone Tools恰恰覆盖了这个缺失的范围。概况起来，Cornerstone Tools覆盖了下述功能：

• 探针、角度、长度、正交线、Cobb角测量
• 椭圆、矩形、自由区域测量
• 箭头、文字标注
• 画刷、橡皮

可以看到，Cornerstone在加上Cornerstone Tools，基本覆盖了医疗影像前端软件的基础和常用功能。需要注意，Cornerstone Tools还处在开发中，从代码到文档，都还没用稳定和完善。

想要了解更多/strong>

帮助文档：https://tools.cornerstonejs.org/

源代码：https://github.com/cornerstonej

OHIF

在介绍OHIF Viewer之前，有必要先介绍OHIF。OHIF，http://ohif.org/， 英文全称为Open Health Imaging Foundation，致力于创造一个平台，使得大家可以：

• 使用最少的资源开发出创新的软件；
• 使用开源组件开发产品化软件；
• 科研成果可以高效转化为临床工具。

作为示例，OHIF开发了两个前端软件，分别是OHIF-viewer和LesionTracker。这两个软件都是基于Cornerstone开发的，都遵循MIT协议，允许商用。其中，前者是一个通用的纯 页版医学影像浏览前端；后者则面向病灶（肿瘤）随访提供了更加专业的工具组件。

OHIF Viewer

这里先重点介绍OHIF Viewer。从下方图像浏览的主界面截图可以看到，OHIF Viewer包含了日常放射影像浏览与测量的各项基础功能。大家注意界面右侧的“Measurements“栏。在图像中添加的测量或标注，都会以列表形式显示在这里，同时自动保存到后台（服务器端）数据库。点击列表中测量或标注，可以直接打开对应的序列，并且直接跳转到测量或标注所在的层面。可以说，OHIF Viewer满足临床医生日常阅片或放射医生“轻量级”会诊完全没有问题。只是如果用于放射科医生日常写 告“重量级/高强度”阅片，在阅片效率和专业工具丰富程度上，还有一定距离。不过放射科医生专业阅片也并不是OHIF Viewer主打的应用场景。

技术上，OHIF Viewer基于Meteor框架开发，https://www.meteor.com/。Meteor是基于node.js的前后端一体化开发平台，采用发布/订阅机制，集成Mongodb，提供服务器-客户端响应式（reactive)数据同步机制。OHIF-viewer的代码采用Meteor包来组织和发布，能够灵活集成，并且易于扩展。

有一点需要强调说明，OHIFviewer是一个非常纯粹的前端viewer，它本身不存储和管理任何影像。而是通过配置文件，与第三方PACS Server对接，通过DICOMweb或DICOM Query/Retrieve方式来查询和获取影像。所以OHIFviewer不能单独部署使用，需要同时部署第三方PACS Server。官方推荐Othanc和dm4chee，以及Osirix。

想要了解更多/strong>

在线文档：https://docs.ohif.org/

源代码：https://github.com/OHIF/Viewers

LesionTracker

在OHIF Viewer以外，OHIF还开发提供了另外一个示例，LesionTracker。这里不展开介绍了，大家可以通过下方的软件主界面快速感受一下。

想要了解更多/strong>

演示视频：http://ohif.org/wp-content/uploads/2017/11/LesionTracker-cropped.mp4

专业论文：https://www.ncbi.nlm.nih.gov/pubmed/29092955

在线文档：https://docs.ohif.org/

源代码：https://github.com/OHIF/Viewers

背后的大神

从Cornerstone到OHIFviewer，背后都离不开一位大神：Chris Hafey，https://github.com/chafey。他是包括Cornerstone和OHIFviewer在内，多个开源医疗影像软件的发起者和主要贡献者，同时也是多个商业化影像软件的主架构师。最让人敬佩的是，他不仅技术上非常厉害，在医学影像软件开发领域，引领新趋势，而且，具有无私的开源共享精神，一直希望用自己的共享，去推动整个产业的发展，从而最终能够服务到更多的人。

最后，原文摘录Chris在Cornerstone的Readme文档中FAQ部分，回答的第一个问题，与大家分享：

The main reason this library is released as [open source](http://en.wikipedia.org/wiki/Open_source) is that I believe that medical imaging in particular can do a lot more to improve patient outcomes but the cost of doing so is prohibitive. Making this library open source removes the cost barrier and will hopefully usher in a new set of medical imaging based applications.

…

It is my hope that this library be used to build a variety of applications and experiences to deliver on this vision. The MIT license allows this library to be used in any type of application – personal, open source and commercial and is therefore appropriate to support this vision. If you are reading this, I hope you can join me in this mission as there is still a lot to be done.