医疗图像 | fqishuai

Cornerstone.js

Cornerstone.js 是一个用于医疗图像处理的 JavaScript 库，主要用于在 Web 应用中显示和操作 DICOM 图像。它提供了丰富的功能来处理医学影像数据，支持放大、缩小、平移、窗宽窗位调整等功能。

以下是一些关于如何使用 Cornerstone.js 的基本示例和步骤。

首先，你需要安装 Cornerstone.js。可以通过 npm 安装：

npm install cornerstone-core
npm install cornerstone-tools

基本使用

引入 Cornerstone.js

在你的 JavaScript 文件中引入 Cornerstone.js 和相关工具：

import cornerstone from 'cornerstone-core';
import cornerstoneTools from 'cornerstone-tools';

设置 HTML 结构

创建一个容器来显示图像：

<div id="dicomImage" style="width: 512px; height: 512px;"></div>

初始化 Cornerstone.js

在你的 JavaScript 文件中初始化 Cornerstone.js：

const element = document.getElementById('dicomImage');
cornerstone.enable(element);

加载和显示 DICOM 图像

使用 Cornerstone.js 加载和显示 DICOM 图像：

const imageId = 'wadouri:http://example.com/path/to/your/dicom/file.dcm';

cornerstone.loadImage(imageId).then(function(image) {
  cornerstone.displayImage(element, image);
});

添加工具

Cornerstone Tools 提供了很多有用的工具来与图像进行交互，比如缩放、平移、窗宽窗位调整等。以下是如何添加一些基本工具：

// 启用工具
cornerstoneTools.init();

// 添加缩放工具
cornerstoneTools.addTool(cornerstoneTools.ZoomTool);
cornerstoneTools.setToolActive('Zoom', { mouseButtonMask: 1 });

// 添加平移工具
cornerstoneTools.addTool(cornerstoneTools.PanTool);
cornerstoneTools.setToolActive('Pan', { mouseButtonMask: 2 });

// 添加窗宽窗位调整工具
cornerstoneTools.addTool(cornerstoneTools.WwwcTool);
cornerstoneTools.setToolActive('Wwwc', { mouseButtonMask: 4 });

以下是一个完整的示例，展示了如何使用 Cornerstone.js 和 Cornerstone Tools 来加载和显示 DICOM 图像，并添加一些基本的交互工具：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cornerstone.js Example</title>
  <style>
    #dicomImage {
      width: 512px;
      height: 512px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="dicomImage"></div>
  <script src="https://unpkg.com/cornerstone-core"></script>
  <script src="https://unpkg.com/cornerstone-tools"></script>
  <script>
    // 初始化 Cornerstone.js
    const element = document.getElementById('dicomImage');
    cornerstone.enable(element);

    const imageId = 'wadouri:http://example.com/path/to/your/dicom/file.dcm';

    // 加载和显示 DICOM 图像
    cornerstone.loadImage(imageId).then(function(image) {
      cornerstone.displayImage(element, image);
    });

    // 启用工具
    cornerstoneTools.init();

    // 添加缩放工具
    cornerstoneTools.addTool(cornerstoneTools.ZoomTool);
    cornerstoneTools.setToolActive('Zoom', { mouseButtonMask: 1 });

    // 添加平移工具
    cornerstoneTools.addTool(cornerstoneTools.PanTool);
    cornerstoneTools.setToolActive('Pan', { mouseButtonMask: 2 });

    // 添加窗宽窗位调整工具
    cornerstoneTools.addTool(cornerstoneTools.WwwcTool);
    cornerstoneTools.setToolActive('Wwwc', { mouseButtonMask: 4 });
  </script>
</body>
</html>

以上示例展示了如何使用 Cornerstone.js 来加载和显示 DICOM 图像，并添加一些基本的交互工具。Cornerstone.js 是一个功能强大的库，可以帮助开发者在 Web 应用中处理医学影像数据。如果你需要更复杂的功能，可以参考 Cornerstone.js 和 Cornerstone Tools 的官方文档。

类似的库

除了 Cornerstone.js 之外，还有其他一些库和工具可以用于处理和显示医学影像数据，特别是 DICOM 图像。以下是一些类似的库和工具：

1. OHIF Viewer

OHIF Viewer 是一个基于 Web 的 DICOM 图像查看器，使用了 Cornerstone.js 作为其核心图像处理库。它提供了一个完整的、功能丰富的 DICOM 查看器，支持多种医学影像处理功能。

特点：
- 支持多种视图模式（如 MPR、多平面重建）。
- 支持 DICOMweb 和 WADO-RS 协议。
- 提供丰富的工具集，如测量工具、注释工具等。
- 可扩展性强，适合集成到现有的医疗影像系统中。
网址： OHIF Viewer

2. Papaya

Papaya 是一个基于 Web 的医学影像查看器，支持多种医学影像格式，包括 NIFTI、DICOM 等。它是一个轻量级的、跨平台的查看器，适用于快速查看和处理医学影像数据。

特点：
- 支持多种医学影像格式。
- 提供多种图像处理和分析工具。
- 轻量级，易于集成和使用。
网址： Papaya

3. AMI (A Medical Imaging Library)

AMI 是一个基于 Three.js 的开源库，用于在 Web 上处理和显示医学影像数据。它支持 2D 和 3D 图像显示，并提供了丰富的图像处理和分析功能。

特点：
- 基于 Three.js，支持 3D 图像显示。
- 支持多种医学影像格式，如 DICOM、NIFTI 等。
- 提供丰富的图像处理和分析工具。
网址： AMI

4. Med3Web

Med3Web 是一个用于医学影像数据可视化的开源 Web 应用。它支持 2D 和 3D 图像显示，并提供了多种图像处理和分析工具。

特点：
- 支持 2D 和 3D 图像显示。
- 提供多种图像处理和分析工具。
- 支持多种医学影像格式。
网址： Med3Web

5. VTK.js

VTK.js 是一个用于科学数据可视化的 JavaScript 库，基于 VTK（Visualization Toolkit）。虽然 VTK.js 并不是专门为医学影像设计的，但它非常强大，可以用于处理和显示复杂的医学影像数据。

特点：
- 支持 2D 和 3D 数据的可视化。
- 提供丰富的数据处理和分析工具。
- 可扩展性强，适合构建复杂的医学影像应用。
网址： VTK.js

结论

这些库和工具各有特点，可以根据你的具体需求选择合适的工具。如果你需要一个功能丰富且易于集成的解决方案，OHIF Viewer 和 Papaya 是不错的选择。如果你需要更多的定制和扩展能力，AMI 和 VTK.js 是很好的选择。希望这些信息对你有所帮助！

Cornerstone.js​

基本使用​

添加工具​

类似的库​

1. OHIF Viewer​

2. Papaya​

3. AMI (A Medical Imaging Library)​

4. Med3Web​

5. VTK.js​

结论​