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

Star Walker

内容很杂的杂记

上一篇文章发出后，大家在讨论中提到了OHIF Viewer。果然，业内的朋友们都已经关注到了这个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);