基于cornerstone.js实现DICOM医学影像在线预览与交互功能

作者：橙子时间：2026-10-25 16:37:58浏览：515

本文介绍如何利用cornerstone.js及相关库在Web端实现DICOM医学影像的在线预览与交互功能。通过引入hammer.js、cornerstone-core等核心组件，结合HTML5 Canvas技术，实现影像加载、窗宽窗高调整、测量等常用功能。文章提供了完整的代码示例及关键步骤解析，帮助开发者快速搭建基于Web的医学影像查看平台。

近期因项目需求，需实现医学影像.dcm文件的在线预览功能。功能开发完成后，特基于原生Demo进行开源分享。

感兴趣的读者可直接参考下方基于原生JS的完整代码示例。

一、完整代码示例

<!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>Document</title>
    <script src="https://unpkg.com/hammerjs@2.0.8/hammer.js"></script>
    <script src="https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.js"></script>
    <script src="https://unpkg.com/cornerstone-math@0.1.10/dist/cornerstoneMath.min.js"></script>
    <script src="https://unpkg.com/cornerstone-wado-image-loader@4.1.3/dist/cornerstoneWADOImageLoader.bundle.min.js"></script>
    <script src="https://unpkg.com/cornerstone-web-image-loader@2.1.1/dist/cornerstoneWebImageLoader.min.js"></script>
    <script src="https://unpkg.com/cornerstone-tools@6.0.7/dist/cornerstoneTools.js"></script>
    <script src="https://unpkg.com/dicom-parser@1.8.13/dist/dicomParser.min.js"></script>
</head>
<body>
    <!-- 用于加载图片的div区域 -->
    <div id="dicomImage" style="width: 512px;height: 512px;"></div>
</body>
<script>
    // 注册并挂载cornerstone及其cornerstoneTools，固定操作
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
    cornerstoneTools.external.Hammer = Hammer;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    // imageId就是cornerstone要求的.dcm图片地址,例如：var imageId = "wadouri:http://127.0.0.1:6699/ctdcm1.dcm";
    var imageId = "wadouri: http://http://127.0.0.1:6699/media/dicm/0a291d1b12b86213d813e3796f14b329_haAJH2K.dcm";
    // 初始化cornerstoneTools工具
    cornerstoneTools.init();
    // 获取要用于加载图片的div区域
    var element = document.getElementById('dicomImage');
    //激活获取到的用于图片加载的区域
    cornerstone.enable(element);
    // 从cornerstoneTools库中获取窗宽,窗高工具
    const WwwcTool = cornerstoneTools.WwwcTool;
    //添加获取到的窗宽,窗高工具
    cornerstoneTools.addTool(WwwcTool);
    // 绑定工具操作功能到鼠标左键
    cornerstoneTools.setToolActive('Wwwc', {
        mouseButtonMask: 1
    })
    //使用loadAndCacheImage()方法加载并缓存图片，然后使用displayImage()方法显示图片。
    cornerstone.loadAndCacheImage(imageId).then(function (image) {
        cornerstone.displayImage(element, image);
    })
</script>
</html>

二、基于源码片段的详细解析

1、针对上述源码片段，进行分段详细介绍，具体如下。

<script src="https://unpkg.com/hammerjs@2.0.8/hammer.js"></script>
    <script src="https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.js"></script>
    <script src="https://unpkg.com/cornerstone-math@0.1.10/dist/cornerstoneMath.min.js"></script>
    <script src="https://unpkg.com/cornerstone-wado-image-loader@4.1.3/dist/cornerstoneWADOImageLoader.bundle.min.js"></script>
    <script src="https://unpkg.com/cornerstone-web-image-loader@2.1.1/dist/cornerstoneWebImageLoader.min.js"></script>
    <script src="https://unpkg.com/cornerstone-tools@6.0.7/dist/cornerstoneTools.js"></script>
    <script src="https://unpkg.com/dicom-parser@1.8.13/dist/dicomParser.min.js"></script>

上述代码主要涉及所需JS库的引入部分。

第一行引入了hammer.js库。hammer.js是一款开源的移动端脚本框架，能够完美实现移动端开发中的大多数事件，如点击、滑动、拖动、多点触控等。在PC端使用也能很好地实现鼠标拖动等交互效果。

第二行引入了cornerstone.js库。Cornerstone是一个旨在搭建完全基于Web的医学影像平台的开源项目。Cornerstone Core组件是一个轻量级的JavaScript库，用于在支持HTML5 canvas元素的现代浏览器上显示医学影像。

第三行引入了cornerstoneMath.min.js库，该库主要包含对医学影像文件进行数学计算支持的技术，例如在使用cornerstone工具库中的测量工具时，需要该库文件提供数学计算支持。

第四行引入了cornerstoneWADOImageLoader.bundle.min.js库，主要用于支持DICOM医学影像文件。

第五行引入了cornerstoneWebImageLoader.min.js，主要用于支持非DICOM医学影像文件的网络图片。

第六行引入了cornerstoneTools.js库，该库是基于cornerstone的工具库，具备画线测距、测量夹角、改变色差、拖动影像等医学影像基础常用功能。

第七行引入了dicomParser.min.js库，该库主要用于对DICOM医学影像文件图片及图片信息进行解析。

 <!-- 用于加载图片的div区域 -->
    <div id="dicomImage" style="width: 512px;height: 512px;"></div>

2、此处定义了一个用于在页面展示DICOM医学文件的区域。

// 注册并挂载cornerstone及其cornerstoneTools，固定操作
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
    cornerstoneTools.external.Hammer = Hammer;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;

3、此处是对cornerstone库及dicom文件渲染相关库文件的注册挂载，属于固定格式，请勿更改。

// imageId就是cornerstone要求的.dcm图片地址,例如：var imageId = "wadouri:http://127.0.0.1:6699/ctdcm1.dcm";
    var imageId = "wadouri: http://http://127.0.0.1:6699/media/dicm/0a291d1b12b86213d813e3796f14b329_haAJH2K.dcm";
    // 初始化cornerstoneTools工具
    cornerstoneTools.init();
    // 获取要用于加载图片的div区域
    var element = document.getElementById('dicomImage');
    //激活获取到的用于图片加载的区域
    cornerstone.enable(element);
    // 从cornerstoneTools库中获取窗宽,窗高工具
    const WwwcTool = cornerstoneTools.WwwcTool;
    //添加获取到的窗宽,窗高工具
    cornerstoneTools.addTool(WwwcTool);

4、此处即为注释中所述的固定步骤。

imageId：官方文档规定的.dcm图片地址，即需要展示的DICOM医学影像文件的网络地址。 dicomImage：此处为HTML代码中自定义的用于在页面展示DICOM医学文件的区域。

其余部分为一些固定操作。

// 绑定工具操作功能到鼠标左键
    cornerstoneTools.setToolActive('Wwwc', {
        mouseButtonMask: 1
    })
    //使用loadAndCacheImage()方法加载并缓存图片，然后使用displayImage()方法显示图片。
    cornerstone.loadAndCacheImage(imageId).then(function (image) {
        cornerstone.displayImage(element, image);
    })

5、这是最后的两步。第1~4行代码用于将前文编写的‘获取窗宽、窗高工具’功能绑定到鼠标左键，实现在图片上按住鼠标左键时，可通过拖动改变色差的效果。

setToolActive()：该方法用于激活并绑定某功能到某个操作键。mouseButtonMask: 1：表示绑定到鼠标左键。 loadAndCacheImage()：该方法用于加载并缓存DICOM图片及图片数据，最大缓存为1GB。 displayImage(element, image)：该方法用于在设定的网页区域展示解析后的DICOM图片。

6、至此，我们已经完成了所有代码。

注意：（1）由于使用的是在线JS库文件，因此需要等待加载完成后才能看到图片效果。

（2）imageId是博主自己设置的本地服务器的dcm图片地址，请替换为你自己服务器的dcm图片地址。如果对node.js有了解的用户，可以使用http-server本地服务器包快速搭建本地服务器用于测试，但需要注意跨域问题。可以使用：http-server --cors命令替代“http-server”命令解决跨域问题。

到此这篇关于基于cornerstone.js的dicom医学影像查看浏览功能的文章就介绍到这了，更多相关cornerstone.js dicom医学影像查看浏览内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

作者最新文章

JS脚本在App中运行报错怎么解决

2026-11-04 23:11:03

JS怎么使用padStart方法给数字补零

2026-11-04 11:12:03

JS是什么意思？JavaScript全称及基本定义

2026-11-04 08:05:29

JS 使用 toFixed(1) 保留一位小数的基本用法与注意事项

2026-11-03 18:34:57

JS字符串转整数：parseInt与Number的区别及用法

2026-11-03 17:26:54