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

之所以前段时间去了解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和OHIF Viewer都采用MIT开源协议。MIT是最宽松和自由的一种版权许可协议。使用者只需要在软件和软件的所有副本中包含原创版权声明，就可以使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。

简单来说，只需要保留原作者的版权声明，就可以将源代码用于商用，并且不需要公开自己二次开发的源代码。

这一点对于现在新崛起的创业公司来讲，简直不要更贴心，有没有？

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.ac