cornerstoneJs 介绍

最新推荐文章于 2025-06-25 09:34:14 发布

原创最新推荐文章于 2025-06-25 09:34:14 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #图像处理 #健康医疗 #前端框架

cornerstoneJs 医学影像专栏收录该内容

4 篇文章

订阅专栏

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	添加对触摸事件和手势的跨浏览器支持

在这里插入图片描述

关键特性

基于 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>