Cornerstone.js

cornerstone.js 是什么？

1.简介

JS编写的医疗DICOM影像浏览工具，用来反对医学影像的显示与交互。他的作用和他的名字一样基石，很多医疗的影像阅片零碎都是基于cornerstone.js开发的，如OHIF Viewer、Lesion Tracker等，目前国内医疗大部分联合AI的阅片零碎也是基于cornerstone.js来进行开发的。

2.商用受权

Cornerstone和OHIF Viewer都采纳MIT开源协定。MIT是最宽松和自在的一种版权许可协定。使用者只须要在软件和软件的所有正本中蕴含原创版权申明，就能够应用、复制、批改、合并、出版发行、分布、再受权及贩售软件及软件的正本。

简略来说，只须要保留原作者的版权申明，就能够将源代码用于商用，并且不须要公开本人二次开发的源代码。

ps: DICOM（Digital Imaging and Communications in Medicine）即医学数字成像和通信，是医学图像和相干信息的国际标准（ISO 12052）。它定义了品质能满足临床须要的可用于数据交换的医学图像格式

cornerstone.js长处个性

  1. 规范兼容——反对DICOM影像解析，来实现图像网页显示；反对DICOMweb中的WADO-URI和WADO-RS接口，来实现图像网页获取。
  2. 高性能——采纳网页端多线程解码，来减速图像显示。这一点对于互联网利用采纳JPEG等压缩形式来传输图像十分有帮忙。
  3. 可扩大——采纳模块化（组件）设计，可能嵌入不同前端架构。例如目前最风行的React、vue框架。

cornerstone.js实例

  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*

通过下面的代码，咱们能够实现在网页上展现一张dicom医学影像，并且反对缩放，平移等根底的影像交互操作。当然cornerstoneTools这个工具须要独自引入，他是cornerstone.js的一个增强，提供了更多的影像交互操作工具。

官网示例（需梯子）：cornerstone.js示例

一些基于cornerstone.js实现的阅片零碎落地视频: lesionTracker

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

后续跟进~