cornerstoneJs 介绍
cornerstone 是一个开源项目，目标是提供一个完整的基于 web 的医疗成像平台。
依赖库
目前基于 cornerstone 开发 web 端医疗成像平台并不止需要一个 javascript 库，而是需要多个库进行配合，庆幸的是几乎所有需要的库均为 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.js | 添加对触摸事件和手势的跨浏览器支持 |
cornerstone-library-hierarchy.png
关键特性
- 基于 HTML5/Javascript 的库，可以轻松地将交互式医学图像添加到 web 应用程序中
- 作为从企业查看器、报告查看器等构建更复杂医疗成像应用程序的基础
- 支持所有基于 HTML5 的浏览器，包括手机、平板电脑和台式机
- 显示所有常见的医学图像格式（例如 8 位灰度、16 位灰度、RGB 颜色）
- 高性能图像显示（例如通过 webworker）
- 通过图像加载器插件设计从具有不同协议的不同系统检索图像
- API 支持更改视口属性（例如 ww/wc、缩放、平移、反转）
- 仅支持 2D 成像
最简单的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>最简单的例子</title>
<script src="https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.js"></script>
<script src="https://unpkg.com/cornerstone-wado-image-loader@4.1.5/dist/cornerstoneWADOImageLoader.bundle.min.js"></script>
<script src="https://unpkg.com/dicom-parser@1.8.13/dist/dicomParser.js"></script>
<style>
#dicom_container {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="dicom_container"></div>
<script>
cornerstoneWADOImageLoader.webWorkerManager.initialize({
maxWebWorkers: navigator.hardwareConcurrency || 1,
startWebWorkersOnDemand: true,
taskConfiguration: {
decodeTask: {
initializeCodecsOnStartup: false,
},
},
webWorkerTaskPaths: [
"https://unpkg.com/cornerstone-wado-image-loader@4.1.5/dist/610.bundle.min.worker.js",
],
});
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
const element = document.getElementById("dicom_container");
cornerstone.enable(element);
const imageId =
"dicomweb:https://tools.cornerstonejs.org/examples/assets/dicom/bellona/chest_lung/1.dcm";
cornerstone.loadImage(imageId).then(function (image) {
cornerstone.displayImage(element, image);
});
</script>
</body>
</html>
