当前位置：首页 > news >正文

Cornerstone完整的基于 Web 的医学成像平台（一）

news 2026/2/10 5:26:09

1.简介

Cornerstone是一个开源的基于Web的医学成像平台，它提供了一个易于使用的界面，可以用于加载、显示和处理医学图像。Cornerstone可以用于许多医学图像处理应用程序，例如计算机断层扫描（CT）、磁共振成像（MRI）和超声成像（US）等。

Cornerstone的主要特点包括：

跨平台性： Cornerstone基于Web技术开发，可以在不同的操作系统和设备上运行，例如Windows、Linux、macOS和移动设备等。
灵活性： Cornerstone提供了一组灵活的API，可以让开发人员自定义和扩展功能。
高性能： Cornerstone使用WebGL和Canvas技术来加速图像渲染，可以处理大量的图像数据。
开源： Cornerstone是一个开源项目，使用MIT许可证发布，可以自由使用和分发。
在本文中，我们将介绍如何在Ubuntu操作系统上安装和部署Cornerstone。以下是安装和部署Cornerstone的步骤：

2. 安装Node.js和NPM

Cornerstone是一个基于Node.js和NPM的Web应用程序，因此需要先安装Node.js和NPM。

使用以下命令在Ubuntu上安装Node.js和NPM：

sudo apt update
sudo apt install nodejs npm

安装完成后，可以使用以下命令验证Node.js和NPM的版本：

node -v
npm -v

3. 下载Cornerstone

使用以下命令从Cornerstone的GitHub仓库下载源代码：

git clone https://github.com/cornerstonejs/cornerstone.git

4. 构建和启动Cornerstone

在下载源代码后，使用以下命令安装依赖项：

cd cornerstone
npm install

安装完成后，可以使用以下命令启动Cornerstone：

npm start

该命令将启动Cornerstone服务器，并在本地端口3000上提供服务。可以使用Web浏览器访问http://localhost:3000来查看Cornerstone的示例应用程序。

5. 使用Cornerstone

Cornerstone提供了一组丰富的API和插件，可以让开发人员轻松地加载、显示和处理医学图像。例如，以下代码片段演示了如何在Web页面中加载和显示DICOM格式的图像：

// 加载Cornerstone核心模块
import cornerstone from 'cornerstone-core';// 加载DICOM格式解码器
import dicomParser from 'dicom-parser';// 加载Cornerstone DICOM模块
import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
import cornerstoneDICOM from 'cornerstone-dicom-loader';// 设置DICOM格式解码器
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;// 加载DICOM文件
const file = 'https://example.com/path/to/dicom/file.dcm';
const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file);// 显示图像
const element = document.getElementById('image-container');
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(image => {
cornerstone.displayImage(element, image);
});

6. 实列代码Cornerstone

以下是一个完整的基于Web的医学成像平台Cornerstone的示例代码，包括加载DICOM格式的图像和测量工具的使用。代码中的注释提供了更详细的解释和说明。

<!DOCTYPE html>
<html>
<head><title>Cornerstone Example</title><!-- 引入Cornerstone库的CSS和JS文件 --><link rel="stylesheet" href="https://unpkg.com/cornerstone-core/dist/cornerstone.min.css" /><script src="https://unpkg.com/cornerstone-core/dist/cornerstone.min.js"></script><!-- 引入DICOM格式的解码器和加载器 --><script src="https://unpkg.com/cornerstone-wado-image-loader/dist/cornerstoneWADOImageLoader.min.js"></script><script src="https://unpkg.com/cornerstone-dicom-loader/dist/cornerstoneDICOMLoader.min.js"></script>
</head>
<body><div id="image-container"></div><!-- 加载和显示DICOM格式的图像 --><script>// 加载DICOM文件const file = 'https://example.com/path/to/dicom/file.dcm';const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file);// 显示图像const element = document.getElementById('image-container');cornerstone.enable(element);cornerstone.loadImage(imageId).then(image => {cornerstone.displayImage(element, image);});</script><!-- 添加测量工具 --><script>const mouseTool = cornerstoneTools.MouseButtonTool({// 工具名称name: 'Mouse',// 鼠标点击事件mouseDownCallback: function (e) {console.log('mouse down');},// 鼠标移动事件mouseMoveCallback: function (e) {console.log('mouse move');},// 鼠标松开事件mouseUpCallback: function (e) {console.log('mouse up');}});// 将测量工具添加到工具栏cornerstoneTools.addTool(mouseTool);cornerstoneTools.setToolActive('Mouse');</script>
</body>
</html>

在上面的代码中，我们引入了Cornerstone库的CSS和JS文件，以及DICOM格式的解码器和加载器。然后，我们使用cornerstoneWADOImageLoader.wadouri.fileManager.add方法加载DICOM文件，并使用cornerstone.enable方法启用Cornerstone在指定的DOM元素上显示图像。我们使用cornerstone.loadImage方法加载图像，并使用cornerstone.displayImage方法显示图像。

接下来，我们使用cornerstoneTools.MouseButtonTool方法创建一个测量工具，并将其添加到工具栏中。最后，我们使用cornerstoneTools.setToolActive方法激活该工具。

当用户使用该工具时，测量工具的回调函数将会被触发，例如当用户按下鼠标时，mouseDownCallback函数将会被调用。

Cornerstone完整的基于 Web 的医学成像平台（一）

1.简介

2. 安装Node.js和NPM

3. 下载Cornerstone

4. 构建和启动Cornerstone

5. 使用Cornerstone

6. 实列代码Cornerstone

相关文章：

Cornerstone完整的基于 Web 的医学成像平台（一）

老板让我在Linux中使用traceroute排查服务器网络问题，幸好我收藏了这篇文章！

一文读懂【数据埋点】

Qt图片定时滚动播放器+透明过渡动画

手把手带你做一套毕业设计-征程开启

万字解析 Linux 中 CPU 利用率是如何算出来的？

芯驰（E3-gateway）开发板环境搭建

HiveSql一天一个小技巧：如何巧用分布函数percent_rank()求去掉最大最小值的平均薪水问题

【python实现华为OD机试真题】优雅子数组【2023 Q1 | 200分】

九种分布式ID解决方案

RocketMQ源码分析

跟着我从零开始入门FPGA（一周入门系列)第六天

2023最新JVM面试题汇总进大厂必备

Cocoa-presentViewController

Vue Mixins

Django-版本信息介绍-版本选择

写给交互设计新手的信息架构全方位指南

15、主从复制,gtid,并行复制，半同步复制,实操案例，常用命令，故障处理

【C语言】实现文件内容映射转移

html css输入框获得焦点、失去焦点效果

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ip子接口配置及删除

佰力博科技与您探讨热释电测量的几种方法

LLMs 系列实操科普（1）

Caliper 配置文件解析：fisco-bcos.json

提升移动端网页调试效率：WebDebugX 与常见工具组合实践

在树莓派上添加音频输入设备的几种方法

倒装芯片凸点成型工艺

当下AI智能硬件方案浅谈