Cornerstone.js 是一个用于医疗成像应用程序的开源 JavaScript 库。它专门设计用于在 Web 浏览器中处理和显示 DICOM(数字成像和通信在医学领域)图像。Cornerstone.js 为开发者提供了强大的工具,可以轻松构建功能丰富的医学图像查看器,广泛应用于放射学、病理学、超声成像等领域。
高性能图像渲染:
支持大尺寸医学图像的快速渲染,包括 CT 扫描、MRI、X 光片等。
利用 GPU 加速(WebGL),提供平滑的图像缩放、平移、旋转等交互操作。
模块化架构:
Cornerstone.js 的架构设计为模块化,开发者可以根据项目需求选择和集成不同的功能模块,如 Cornerstone Core、Cornerstone Tools、Cornerstone WADO Image Loader 等。
提供了丰富的插件和扩展支持,使其更易于集成和扩展。
DICOM 支持:
原生支持 DICOM 格式图像的加载、解析和显示。通过与 DICOM Parser 和 WADO Image Loader 等库结合,可以处理各种 DICOM 文件和序列。
开源和社区支持:
作为一个开源项目,Cornerstone.js 拥有一个活跃的开发者社区,提供持续的支持和更新。
开源许可证使得开发者可以自由使用和修改代码,以满足特定项目需求。
跨平台兼容性:
Cornerstone.js 适用于各种浏览器,且可以在桌面和移动设备上流畅运行,方便开发跨平台的医学影像应用。
工具集成:
提供了丰富的医学影像工具集(如测量、注释、放大镜、窗宽窗位调整等),帮助开发者快速构建功能齐全的医学影像查看器。
简化医疗成像应用的开发:
Cornerstone.js 的目的是为 Web 开发者提供一个强大且易用的工具集,使其能够轻松构建和定制医疗成像应用,而不需要深入了解底层图像处理技术。
推动医学影像的数字化和网络化:
随着医学影像数字化和网络化的趋势,Cornerstone.js 帮助开发者构建能够通过互联网访问和共享医学影像的应用程序,从而提高诊断效率和远程医疗的可行性。
提高医疗影像处理的可访问性:
通过基于浏览器的解决方案,Cornerstone.js 使得医学影像处理不再局限于昂贵的专用软件,而是可以通过普通的 Web 浏览器轻松实现,从而提高了其可访问性和应用范围。
在线 DICOM 查看器:用于浏览、处理和分析医学影像的 Web 应用。
远程医疗:通过 Web 应用共享和查看医学影像,支持医生进行远程诊断。
教育和培训:用于医学影像教学的在线工具,帮助医学生和专业人士进行学习和培训。
研究和开发:为医学图像处理的研究和开发项目提供基础工具。
Cornerstone.js 最新版的依赖库
Cornerstone.js 是一个专为医疗成像应用设计的开源 JavaScript 库,能够在 Web 浏览器中高效加载、解析和显示 DICOM(数字成像和通信在医学领域)图像。为了确保 Cornerstone.js 能够正常运行并发挥其全部功能,需安装并配置其最新版本的依赖库。以下是截至 2023 年 10 月 Cornerstone.js 最新版的主要依赖库及其相关信息:
cornerstone-core
用途:Cornerstone.js 的核心库,负责图像渲染、管理和基本交互。
安装:
npm install cornerstone-core
文档:cornerstone-core GitHub
cornerstone-tools
用途:提供一组用于图像交互和注释的工具,如测量、缩放、旋转、窗宽窗位调整等。
安装:
npm install cornerstone-tools
文档:cornerstone-tools GitHub
cornerstone-wado-image-loader
用途:用于加载和解析 DICOM 图像,支持 WADO(Web Access to DICOM Objects)和 DICOMweb 协议。
安装:
npm install cornerstone-wado-image-loader
文档:cornerstone-wado-image-loader GitHub
dicom-parser
用途:解析 DICOM 文件,处理 DICOM 数据结构和元数据。
安装:
npm install dicom-parser
文档:dicom-parser GitHub
cornerstone-math (可选)
用途:提供数学运算和工具,支持图像处理和几何变换。
安装:
npm install cornerstone-math
文档:cornerstone-math GitHub
hammerjs (可选)
用途:处理触摸事件和手势,增强移动设备上的用户交互体验。
安装:
npm install hammerjs
文档:Hammer.js 官网
Web Workers:cornerstone-wado-image-loader
使用 Web Workers 来处理图像加载和解析任务。需要配置正确的 Worker 路径和加载方式。
在你的项目目录中运行以下命令以安装所有主要依赖:
npm install cornerstone-core cornerstone-tools cornerstone-wado-image-loader dicom-parser cornerstone-math hammerjs
如果不使用包管理器,可以通过 CDN 引入各个依赖库的脚本。但请注意,微信小程序不支持直接使用 标签,因此需要将这些库文件手动添加到项目中,并通过模块系统引入。
示例(适用于 Web 项目):
注意:由于微信小程序不支持 标签,需要将这些库下载到本地,并通过模块系统(如 ES6
import
)引入。
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
...
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 的项目,可能需要安装相关的类型声明文件,尤其是对于没有官方类型定义的库。例如:
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';
版本兼容性:
确保各个依赖库的版本彼此兼容。不同版本之间可能存在不兼容的 API 变更。
定期检查各个库的更新日志和发行说明,确保与项目的依赖版本保持一致。
Web Worker 路径:
在配置 Web Worker 时,确保 Worker 脚本路径正确,且在微信小程序中 Worker 文件被正确引用和打包。
微信小程序对路径和文件结构有特定要求,请根据实际项目结构调整路径。
打包工具配置:
使用如 Webpack、Rollup 等模块打包工具时,确保正确配置以支持 Cornerstone.js 的模块和依赖。
对于微信小程序,可能需要使用微信支持的打包工具或自定义配置,以确保所有依赖库被正确打包和引用。
CORS 和安全策略:
确保从服务器加载 DICOM 图像时,服务器配置了正确的 CORS(跨域资源共享)头,以允许跨域请求。
在微信小程序中,需在 app.json
或 project.config.json
中配置合法的域名。
性能优化:
医学图像通常较大,加载和渲染时需要考虑性能优化,如使用 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 以及确保版本兼容性,可以高效地开发功能丰富的医学图像查看器。特别是在微信小程序环境中开发时,需注意其特有的限制和配置要求,确保所有依赖库被正确引用和打包。
如有进一步的问题或需要具体的配置示例,欢迎随时提问!