基于cornerstone.js的医学影像操作（巨详细）文章详细介绍了基于 cornerstone.js 操作医学影像的

一、要用到的库介绍

下面介绍的库都是使用cornerstone.js操作医学影像要用到的库，有7个，不过不要怕，引的库越多，需要我们写的代码就越少。下面关于他们的介绍有些看不懂也没关系，不影响我们的开发。

* 1、Cornerstone.js

Cornerstone.js 是一个开源的 JavaScript 库，专门用于在网页上显示和交互医学影像（如 DICOM 图像）。它是由 OHIF (Open Health Imaging Foundation) 维护的项目，旨在为开发者提供一个简单而强大的工具，用于构建医学影像查看器和相关应用。

2、cornerstone-math.js

CornerstoneMath.js 是一个与 Cornerstone.js 配合使用的 JavaScript 库，它提供了数学计算相关的工具和函数，用于支持医学影像的显示和交互操作。CornerstoneMath.js 包含了各种与医学影像处理相关的数学计算功能。

3、cornerstone-wado-image-loader

cornerstone-wado-image-loader.js是一个与 Cornerstone.js 配合使用的 JavaScript 库，专门用于从 Web 访问 DICOM 影像数据，并将其加载到 Cornerstone.js 中进行显示。WADO 代表 “Web Access to DICOM Objects”，是一种通过 HTTP 协议访问 DICOM 数据的标准方法。

4、cornerstone-web-image-loader

cornerstone-web-image-loader.js是 Cornerstone.js 生态系统中的一个 JavaScript 库，用于加载非 DICOM 格式的图像（如 PNG、JPEG 等）到 Cornerstone.js 中进行显示。由于 Cornerstone.js 主要是为处理 DICOM 格式的医学影像而设计的，cornerstone-web-image-loader.js扩展了 Cornerstone.js 的能力，使其也能支持加载和显示常见的 Web 图像格式。

* 5、cornerstoneTools.js

cornerstoneTools.js 是 Cornerstone.js 生态系统中的一个重要组成部分，它提供了一系列用于医学影像交互操作的工具和功能。这些工具可以帮助用户在网页上对医学影像进行各种操作，如测量、注释、标记、图像处理等。

6、Hammer.js

Hammer.js 是一个轻量级的 JavaScript 库，专门用于处理触摸事件和手势操作。它可以在桌面和移动设备上运行，并提供了一系列的手势识别功能。

7、dicomParser.js

dicomParser.js是一个用于解析 DICOM 文件的 JavaScript 库。DICOM（Digital Imaging and Communications in Medicine）是医学影像数据的标准格式，涵盖了图像数据、元数据（如患者信息、扫描参数等）和通信协议。dicomParser.js 的主要功能是解析这些 DICOM 文件，提取其中的图像数据和元数据，以便在网页应用中进行显示和处理。

二、准备工作

1、准备一张dicom格式的影像素材

dicom格式的文件在上面第一章第7节有解释，是医学影像数据的标准格式。由于这不是普通的图片格式，所以本文章上传不了该文件，博主提供一个下载链接：

github.com/shenxianglo…

点进去随便下载一个就好了

编辑

然后把该素材放进我们的项目里，可以参考我放的位置：

编辑

2、在vscode里面下载Live Server插件

因为一会儿我们要引入我们上面准备的那个dicom影像素材，需要用http链接的格式引入，所以这个项目我们需要用liveserver启动，而不是直接本地打开index.html，这样的话无法通过js获取到素材文件

编辑

三、使用方法

1、引入上面提到的那7个库

这里我们用在线链接引入，就不用去gitgub上去下载核心文件了，直接复制以下链接粘贴到html文件的head里就OK了。

<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.13.2/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.10/dist/cornerstoneTools.js"></script>
<script src="https://unpkg.com/dicom-parser@1.8.21/dist/dicomParser.min.js"></script>

2、准备一个div容器

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

3、配置这些库，以便他们能互相工作

cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneTools.external.Hammer = Hammer;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;

4、初始化cornerstoneTools

cornerstoneTools.init()
// 获取用于展示影像的dom容器
const dicomImage = document.getElementById('dicomImage')
cornerstone.enable(dicomImage)

5、到cornerstone的官网里的用例里去找我们需要的操作

用例链接：tools.cornerstonejs.org/examples/

这次我们选择两个用例来写，第一个是亮度调节，点进去看用例展示和实现代码

编辑

接着写用例里面的代码

// 添加工具
const WwwcTool = cornerstoneTools.WwwcTool
cornerstoneTools.addTool(WwwcTool)
// 设置操作实现方式，mouseButtonMask是通过鼠标点击来操作，1的意思是点击鼠标左键实现
cornerstoneTools.setToolActive('Wwwc', {mouseButtonMask: 1})

6、引入dicom素材，并且通过cornerstone处理后放到html容器里供我们操作

这里就体现了上面我们为什么要用liveserver打开项目的原因，因为liveserver会在我们本地启一个服务器，把我们项目里的所有资源都上传到这个本地服务器上去，所以我们通过本地ip就可以访问到里面的素材了。

let imageId = "wadouri:http://127.0.0.1:5500/testdcm/ImageFileName0080.dcm"
cornerstone.loadAndCacheImage(imageId).then((image) => {
  cornerstone.displayImage(dicomImage, image)
})

至此，代码就写完了，我们在浏览器里输入链接http://127.0.0.1:5500/index.html来打开我们的页面

我们可以在图像里通过按住鼠标左键拖动来调节影像的曝光度

编辑

四、总结

至此，我们就成功编写了一个用cornerstone.js以及相关库来操作dicom医学影像的demo，下面将附上我的整体代码，其实就是上面的代码片段的拼接。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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.13.2/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.10/dist/cornerstoneTools.js"></script>
  <script src="https://unpkg.com/dicom-parser@1.8.21/dist/dicomParser.min.js"></script>
</head>
<body>
  <div id="dicomImage" style="width: 512px; height: 512px;"></div>
  <script>
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
    cornerstoneTools.external.Hammer = Hammer;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;

    // 初始化tools
    cornerstoneTools.init()
    // 获取用于展示影像的dom容器
    const dicomImage = document.getElementById('dicomImage')
    cornerstone.enable(dicomImage)

    // 添加工具
    const WwwcTool = cornerstoneTools.WwwcTool
    cornerstoneTools.addTool(WwwcTool)
    // 设置操作实现方式，mouseButtonMask是通过鼠标点击来操作，1的意思是点击鼠标左键实现
    cornerstoneTools.setToolActive('Wwwc', {mouseButtonMask: 1})

    // 引入dicom素材，并且通过cornerstone处理后放到html容器里供我们操作
    let imageId = "wadouri:http://127.0.0.1:5500/testdcm/ImageFileName0080.dcm"
    cornerstone.loadAndCacheImage(imageId).then((image) => {
      cornerstone.displayImage(dicomImage, image)
    })
  </script>
</body>
</html>

除了调整曝光度之外，cornerstone还给我们提供了很多操作例子，下面博主再演示一个例子：AngleTool，用来给测量并标记影像角度的工具

编辑

核心代码如下

// 添加工具
const AngleTool = cornerstoneTools.AngleTool
cornerstoneTools.addTool(AngleTool)
// 设置操作实现方式，mouseButtonMask是通过鼠标点击来操作，1的意思是点击鼠标左键实现
cornerstoneTools.setToolActive('Angle', {mouseButtonMask: 1})

其他代码不变，只将这一部分替换就好了

编辑

效果如下：

编辑