共计 2341 个字符，预计需要花费 6 分钟才能阅读完成。
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 长处个性
- 规范兼容——反对 DICOM 影像解析，来实现图像网页显示；反对 DICOMweb 中的 WADO-URI 和 WADO-RS 接口，来实现图像网页获取。
- 高性能——采纳网页端多线程解码，来减速图像显示。这一点对于互联网利用采纳 JPEG 等压缩形式来传输图像十分有帮忙。
- 可扩大——采纳模块化（组件）设计，可能嵌入不同前端架构。例如目前最风行的 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 的几大基本概念
- Enabled element —– 激活元素
- ImageIds —– 图片 id
- ImageLoaders —- 图片加载器
- Image Object —- 图片对象
- Viewport —- 视图
- Pixel Coordinate System —- 图像坐标系
- Architecture —- 架构
- Rendering loop —- 主渲染循环
上面咱们一个个了解
Enabled Element（激活元素）
激活的元素是一个 HTML DOM node, 一般来说是一个 div 标签。而后如果想要展现一张 dicom 影像图片，须要做上面几件事件：
- 通过 script 标签引入 cornerstone.js 文件
- 为一个或多个图片加载器写 JS 代码，让 cornerstone 能够在网页上展现图片的理论像素
- 把一个用于展现图片的 element 增加到页面中，用 css 定义宽高地位等款式
- 调用 enable()api，让 element 能够渲染图片
- 应用 loadImage()api 加载图片，应用 displayImage()api 渲染图片
如果想让展现的图片可能实现一些根底的交互，你须要做到如下几步：
- 指定 viewport 的窗口宽度和高度、放大放大、平移等参数。vIE 我 port 的参数能够在调用 displayImage()的时候设定，也能够前面通过调用 setViewport()设置
- 监听 CornerstoneImageRendered event，能够在渲染的影像上画画
- 监听 CornerstoneViewportUpdated event，能够感知图像视口属性的变动
- 实现一个自定义 ImageLoader，它能够检索存储在非标准容器或非标准协议中的图像
- 当 DOM 的大小变动的时候，能够通过调用 resize() api 告诉 cornerstone
ImageIds（图片 id 标识）
cornerstone 的 imageid 是定义了一张展现图片的 url
后续跟进~
