从Cornerstone到OHIF Viewer—JS影像前端开发最佳范例

原文：从Cornerstone到OHIF Viewer—JS影像前端开发最佳范例 - Star Walker的文章 - 知乎
https://zhuanlan.zhihu.com/p/58767457

业内的朋友们都已经关注到了这个JavaScript语言编写的DICOM影像浏览前端，并且早就有了深入了解。之所以前段时间去了解DICOMweb，因为偶然机会，先是接触到了Cornerstone，然后从CornerStone发现了OHIF Viewer。学习OHIF Viewer时，发现OHIF Viewer后台首选DICOMweb 接口，从第三方PACS服务器查询和获取影像。

可能不是所有同学都已经了解OHIF Viewer，这里简单梳理从Cornerstone到OHIF Viewer的脉络体系，介绍给大家。

技术体系

概况来讲，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影像，并且支持包括缩放、平移、灰窗这些基础图像交互操作。

const element = document.getElementById('demo-element');
const imageId = 'https://example.url.com/image.dcm';
cornerstone.enable(element);
cornerstone.loadAndCacheImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
*// Enable our tools*
cornerstoneTools.mouseInput.enable(element);
cornerstoneTools.mouseWheelInput.enable(element);
cornerstoneTools.wwwc.activate(element, 1); *// Left Click*
cornerstoneTools.pan.activate(element, 2); *// Middle Click*
cornerstoneTools.zoom.activate(element, 4); *// Right Click*
cornerstoneTools.zoomWheel.activate(element); *// Mouse Wheel*
});

网站首页还用一句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)

图片.png

例子二：Composite Images

图片.png

概况起来，Cornerstone覆盖了：

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

想要了解更多？
源代码：https://github.com/cornerstonejs/cornerstone
在线文档：https://docs.cornerstonejs.org/

Cornerstone Tools

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

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

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

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

想要了解更多？

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

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

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主打的应用场景

图片.png

技术上，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。

想要了解更多？

在线文档：https://docs.ohif.org/
源代码：https://github.com/OHIF/Viewers

LesionTracker

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

图片.png

背后的大神

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

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

The main reason this library is released as 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.