一、Cornerstone介绍及基本案例

前言

提示：这里可以添加本文要记录的大概内容：

一、Cornerstone介绍

Cornerstone，这是一个轻量级的 JavaScript 库，用于在支持 HTML5 canvas 元素的现代 Web 浏览器中显示医学图像。
Cornerstone 本身并不是一个完整的应用程序，而是一个可以用作更大、更复杂的应用程序一部分的组件，需要搭配多个库进行配合。
Cornerstone已经提供了一整套的生态系统。

二、依赖库

库名	作用
cornerstone Core	提供图像渲染、加载、缓存和视口转换的中央库
cornerstone Tools	用于帮助注释、分割和测量医学图像
cornerstone WADO Image Loader	用于通过 HTTP（WADO-URI）或 DICOMWeb（WADO-RS）的 DICOM P10 实例的图像加载器
cornerstone Web Image Loader	用于 web 图像（PNG、JPEG）的图像加载器
dicom Parser	用于在现代基于 HTML5 的 web 浏览器（IE10 ）节点中解析 DICOM P10 字节流以及原始（未封装在第 10 部分中）字节流
cornerstone Math	数学和计算几何
Hammer	添加对触摸事件和手势的跨浏览器支持（移动端）

三、特性

• 基于 HTML5/Javascript 的库，可以轻松地将交互式医学图像添加到 web 应用程序中
• 作为从企业查看器、报告查看器等构建更复杂医疗成像应用程序的基础
• 支持所有基于 HTML5 的浏览器，包括手机、平板电脑和台式机
• 显示所有常见的医学图像格式（例如 8 位灰度、16 位灰度、RGB 颜色）
• 高性能图像显示（例如通过 webworker）
• 通过图像加载器插件设计从具有不同协议的不同系统检索图像
• API 支持更改视口属性（例如 ww/wc、缩放、平移、反转）
• 支持 3D 成像

四、概念解释

要想弄清cornerstone, 必须先弄清楚它定义一些概念，这样才能事半功倍。

1、Enabled Elements

页面元素，就是一个div， 用来承载影像显示的容器

2、Image Id

Image Id 是一个标记图像的自定义url地址，说白了可以理解成一个影像文件的URL，当调用cornerstone.loadImage(imageId)加载影像时，先会根据imageId的scheme name选择image loader（图像加载器）去加载和解析影像文件。

具体格式如下：

3、Image Loaders（图像加载器）

Image Loader 其实就是一个定义好的函数 ， 实则是传入影像文件URL，然后去请求远端服务器获取dicom文件，并且解析这个dicom文件，返回一个异步的image对象，可以供displayImage函数在界面上 渲染出来。 其形式如下：

function loadImage(imageId) {
   
   
  ...
  const promise = new Promise(