cornerstonejs介绍

Cornerstone.js 是一个用于医疗成像应用程序的开源 JavaScript 库。它专门设计用于在 Web 浏览器中处理和显示 DICOM（数字成像和通信在医学领域）图像。Cornerstone.js 为开发者提供了强大的工具，可以轻松构建功能丰富的医学图像查看器，广泛应用于放射学、病理学、超声成像等领域。

特点

1. 高性能图像渲染：

   • 支持大尺寸医学图像的快速渲染，包括 CT 扫描、MRI、X 光片等。

   • 利用 GPU 加速（WebGL），提供平滑的图像缩放、平移、旋转等交互操作。

2. 模块化架构：

   • Cornerstone.js 的架构设计为模块化，开发者可以根据项目需求选择和集成不同的功能模块，如 Cornerstone Core、Cornerstone Tools、Cornerstone WADO Image Loader 等。

   • 提供了丰富的插件和扩展支持，使其更易于集成和扩展。

3. DICOM 支持：

   • 原生支持 DICOM 格式图像的加载、解析和显示。通过与 DICOM Parser 和 WADO Image Loader 等库结合，可以处理各种 DICOM 文件和序列。

4. 开源和社区支持：

   • 作为一个开源项目，Cornerstone.js 拥有一个活跃的开发者社区，提供持续的支持和更新。

   • 开源许可证使得开发者可以自由使用和修改代码，以满足特定项目需求。

5. 跨平台兼容性：

   • Cornerstone.js 适用于各种浏览器，且可以在桌面和移动设备上流畅运行，方便开发跨平台的医学影像应用。

6. 工具集成：

   • 提供了丰富的医学影像工具集（如测量、注释、放大镜、窗宽窗位调整等），帮助开发者快速构建功能齐全的医学影像查看器。

目的

1. 简化医疗成像应用的开发：

   • Cornerstone.js 的目的是为 Web 开发者提供一个强大且易用的工具集，使其能够轻松构建和定制医疗成像应用，而不需要深入了解底层图像处理技术。

2. 推动医学影像的数字化和网络化：

   • 随着医学影像数字化和网络化的趋势，Cornerstone.js 帮助开发者构建能够通过互联网访问和共享医学影像的应用程序，从而提高诊断效率和远程医疗的可行性。

3. 提高医疗影像处理的可访问性：

   • 通过基于浏览器的解决方案，Cornerstone.js 使得医学影像处理不再局限于昂贵的专用软件，而是可以通过普通的 Web 浏览器轻松实现，从而提高了其可访问性和应用范围。

应用场景

• 在线 DICOM 查看器：用于浏览、处理和分析医学影像的 Web 应用。

• 远程医疗：通过 Web 应用共享和查看医学影像，支持医生进行远程诊断。

• 教育和培训：用于医学影像教学的在线工具，帮助医学生和专业人士进行学习和培训。

• 研究和开发：为医学图像处理的研究和开发项目提供基础工具。

Cornerstone.js 最新版的依赖库

Cornerstone.js 是一个专为医疗成像应用设计的开源 JavaScript 库，能够在 Web 浏览器中高效加载、解析和显示 DICOM（数字成像和通信在医学领域）图像。为了确保 Cornerstone.js 能够正常运行并发挥其全部功能，需安装并配置其最新版本的依赖库。以下是截至 2023 年 10 月 Cornerstone.js 最新版的主要依赖库及其相关信息：

主要依赖库

1. cornerstone-core

   • 用途：Cornerstone.js 的核心库，负责图像渲染、管理和基本交互。

   • 安装：

     npm install cornerstone-core

   • 文档：cornerstone-core GitHub

2. cornerstone-tools

   • 用途：提供一组用于图像交互和注释的工具，如测量、缩放、旋转、窗宽窗位调整等。

   • 安装：

     npm install cornerstone-tools

   • 文档：cornerstone-tools GitHub

3. cornerstone-wado-image-loader

   • 用途：用于加载和解析 DICOM 图像，支持 WADO（Web Access to DICOM Objects）和 DICOMweb 协议。

   • 安装：

     npm install cornerstone-wado-image-loader

   • 文档：cornerstone-wado-image-loader GitHub

4. dicom-parser

   • 用途：解析 DICOM 文件，处理 DICOM 数据结构和元数据。

   • 安装：

     npm install dicom-parser

   • 文档：dicom-parser GitHub

5. cornerstone-math (可选)

   • 用途：提供数学运算和工具，支持图像处理和几何变换。

   • 安装：

     npm install cornerstone-math

   • 文档：cornerstone-math GitHub

6. hammerjs (可选)

   • 用途：处理触摸事件和手势，增强移动设备上的用户交互体验。

   • 安装：

     npm install hammerjs

   • 文档：Hammer.js 官网

附加依赖

• Web Workers：cornerstone-wado-image-loader 使用 Web Workers 来处理图像加载和解析任务。需要配置正确的 Worker 路径和加载方式。

使用 NPM 安装所有依赖

在你的项目目录中运行以下命令以安装所有主要依赖：

npm install cornerstone-core cornerstone-tools cornerstone-wado-image-loader dicom-parser cornerstone-math hammerjs

使用 CDN 引入依赖库（不适用于微信小程序）

如果不使用包管理器，可以通过 CDN 引入各个依赖库的脚本。但请注意，微信小程序不支持直接使用 <script> 标签，因此需要将这些库文件手动添加到项目中，并通过模块系统引入。

示例（适用于 Web 项目）：

<script src="https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.js"></script>
<script src="https://unpkg.com/cornerstone-tools@4.26.1/dist/cornerstoneTools.js"></script>
<script src="https://unpkg.com/cornerstone-wado-image-loader@4.4.0/dist/cornerstoneWADOImageLoader.js"></script>
<script src="https://unpkg.com/dicom-parser@1.8.13/dist/dicomParser.js"></script>
<script src="https://unpkg.com/cornerstone-math@0.1.8/dist/cornerstoneMath.js"></script>
<script src="https://unpkg.com/hammerjs@2.0.8/hammer.min.js"></script>

注意：由于微信小程序不支持 <script> 标签，需要将这些库下载到本地，并通过模块系统（如 ES6 import）引入。

配置 Web Workers

cornerstone-wado-image-loader 需要配置 Web Worker 的路径，以便在后台线程中处理图像加载任务。以下是配置示例：

import * as cornerstone from 'cornerstone-core';
import * as dicomParser from 'dicom-parser';
import * as cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
​
cornerstoneWADOImageLoader.webWorkerManager.initialize({
  maxWebWorkers: navigator.hardwareConcurrency || 1,
  startWebWorkersOnDemand: true,
  taskConfiguration: {
    decodeTask: {
      initializeCodecsOnStartup: false,
    },
  },
  webWorkerTaskPaths: [
    'path/to/cornerstoneWADOImageLoaderWorker.js', // 修改为实际路径
  ],
});
​
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;

在微信小程序中配置 Web Worker：

由于微信小程序对 Web Worker 的支持有一定限制，需确保 Worker 文件正确放置在项目中，并通过相对路径引用。例如，可以将 Worker 文件放在 workers 目录下，并在 cornerstoneWADOImageLoader.webWorkerManager.initialize 中使用相对路径：

webWorkerTaskPaths: [
  '/workers/cornerstoneWADOImageLoaderWorker.js',
],

示例项目结构

/project-root
  /node_modules
  /pages
    /index
      index.wxml
      index.wxss
      index.ts
      index.json
  /workers
    cornerstoneWADOImageLoaderWorker.js
  /libs
    cornerstone-core.js
    dicom-parser.js
    cornerstone-wado-image-loader.js
    cornerstone-tools.js
    cornerstone-math.js
    hammer.min.js
  package.json
  tsconfig.json
  ...

TypeScript 文件示例 (index.ts)

import * as cornerstone from 'cornerstone-core';
import * as dicomParser from 'dicom-parser';
import * as cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
import * as cornerstoneTools from 'cornerstone-tools';
import 'hammerjs';
​
Page({
  data: {},
​
  onLoad() {
    this.initCornerstone();
  },
​
  initCornerstone() {
    // 配置 Web Worker
    cornerstoneWADOImageLoader.webWorkerManager.initialize({
      maxWebWorkers: navigator.hardwareConcurrency || 1,
      startWebWorkersOnDemand: true,
      taskConfiguration: {
        decodeTask: {
          initializeCodecsOnStartup: false,
        },
      },
      webWorkerTaskPaths: [
        'workers/cornerstoneWADOImageLoaderWorker.js',
      ],
    });
​
    // 设置外部依赖
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
​
    // 启用 Cornerstone
    const ctx = wx.createCanvasContext('dicomCanvas') as WechatMiniprogram.CanvasContext;
    const element: any = {
      addEventListener: (_: string, __: EventListenerOrEventListenerObject) => {},
      removeEventListener: (_: string, __: EventListenerOrEventListenerObject) => {},
      style: {
        width: '500px',
        height: '500px',
      },
      clientWidth: 500,
      clientHeight: 500,
      getBoundingClientRect: () => ({ width: 500, height: 500 }),
      getContext: () => ctx,
      canvas: ctx,
    };
​
    cornerstone.enable(element);
​
    // 加载 DICOM 图像
    const imageId = "dicomweb:https://tools.cornerstonejs.org/examples/assets/dicom/bellona/chest_lung/1.dcm";
    cornerstone.loadImage(imageId).then((image: cornerstone.Image) => {
      cornerstone.displayImage(element, image);
    });
  }
});

安装类型声明文件（TypeScript 项目）

对于使用 TypeScript 的项目，可能需要安装相关的类型声明文件，尤其是对于没有官方类型定义的库。例如：

npm install --save-dev @types/hammerjs

对于其他库，如果没有官方的类型声明文件，可以手动添加声明或使用 any 类型：

// 在项目的类型声明文件中添加
declare module 'cornerstone-core';
declare module 'cornerstone-tools';
declare module 'cornerstone-wado-image-loader';
declare module 'dicom-parser';

注意事项

1. 版本兼容性：

   • 确保各个依赖库的版本彼此兼容。不同版本之间可能存在不兼容的 API 变更。

   • 定期检查各个库的更新日志和发行说明，确保与项目的依赖版本保持一致。

2. Web Worker 路径：

   • 在配置 Web Worker 时，确保 Worker 脚本路径正确，且在微信小程序中 Worker 文件被正确引用和打包。

   • 微信小程序对路径和文件结构有特定要求，请根据实际项目结构调整路径。

3. 打包工具配置：

   • 使用如 Webpack、Rollup 等模块打包工具时，确保正确配置以支持 Cornerstone.js 的模块和依赖。

   • 对于微信小程序，可能需要使用微信支持的打包工具或自定义配置，以确保所有依赖库被正确打包和引用。

4. CORS 和安全策略：

   • 确保从服务器加载 DICOM 图像时，服务器配置了正确的 CORS（跨域资源共享）头，以允许跨域请求。

   • 在微信小程序中，需在 app.json 或 project.config.json 中配置合法的域名。

5. 性能优化：

   • 医学图像通常较大，加载和渲染时需要考虑性能优化，如使用 Web Worker、按需加载等技术。

   • Cornerstone.js 提供了多种优化选项，确保在移动设备上也能流畅运行。

获取最新版本和文档

为了确保使用的是最新版本的依赖库，建议定期访问官方资源：

• GitHub 仓库：

  • Cornerstone.js GitHub

  • cornerstone-tools GitHub

  • cornerstone-wado-image-loader GitHub

  • dicom-parser GitHub

• NPM 页面：

  • cornerstone-core on NPM

  • cornerstone-tools on NPM

  • cornerstone-wado-image-loader on NPM

  • dicom-parser on NPM

• 官方文档：

  • Cornerstone.js 文档

总结

使用 Cornerstone.js 构建医学影像应用需要安装并正确配置一系列依赖库。通过使用 npm 管理依赖、正确配置 Web Workers 以及确保版本兼容性，可以高效地开发功能丰富的医学图像查看器。特别是在微信小程序环境中开发时，需注意其特有的限制和配置要求，确保所有依赖库被正确引用和打包。

如有进一步的问题或需要具体的配置示例，欢迎随时提问！