脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → cornerstone.js dicom医学影像查看浏览

基于cornerstone.js的dicom医学影像查看浏览功能

 更新时间：2022年07月25日 10:23:49   作者：莫颀  
这篇文章主要介绍了基于cornerstone.js的dicom医学影像查看浏览功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

最近由于项目需求，需要医学影像.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库，Corenerstone 是一个旨在搭建一个完全基于web的医学影像平台的开源项目。Cornerstone Core组件是一个在支持HTML5 canvas元素的现代浏览器上显示医学影像的轻量级的JavaScript库。

第三行引入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实现固定显示区域内自动缩放图片的方法

    js实现固定显示区域内自动缩放图片的方法

    这篇文章主要介绍了js实现固定显示区域内自动缩放图片的方法,实例分析了javascript操作页面元素及属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JavaScript动态检测密码强度原理及实现方法详解

    JavaScript动态检测密码强度原理及实现方法详解

    这篇文章主要介绍了JavaScript动态检测密码强度原理及实现方法,结合具体实例形式详细分析了javascript针对输入字符串密码强度检测的原理与相关判断操作技巧,需要的朋友可以参考下
    2019-06-06
  • JavaScript手写LRU算法的示例代码

    JavaScript手写LRU算法的示例代码

    LRU是Least Recently Used的缩写，即最近最少使用。作为一种经典的缓存策略，它的基本思想是长期不被使用的数据，在未来被用到的几率也不大，所以当新的数据进来时我们可以优先把这些数据替换掉。本文用JavaScript实现这一算法，需要的可以参考一下
    2022-09-09
  • xmlhttp缓存清除的2种解决方法

    xmlhttp缓存清除的2种解决方法

    这篇文章主要介绍了xmlhttp缓存清除的2种解决方法。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • 发个自己写的表格操作类(添加，删除，排序，上移，下移)

    发个自己写的表格操作类(添加，删除，排序，上移，下移)

    发个自己写的表格操作类(添加，删除，排序，上移，下移)...
    2006-11-11
  • JS对象转换为Jquery对象示例

    JS对象转换为Jquery对象示例

    JS对象转换为Jquery对象的方便在于可以使用jquery的一些方法，下面有个示例，大家可以参考下
    2014-01-01
  • JavaScript判断页面是否滚动到底部的技巧

    JavaScript判断页面是否滚动到底部的技巧

    在 JavaScript 中,我们可以通过一些技巧来判断页面是否滚动到底部,本文将介绍一些常用的方法,帮助你在项目中实现这一功能,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • Javascript的表单与验证-非空验证

    Javascript的表单与验证-非空验证

    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。本文给大家介绍javascript的表单与验证-非空验证，对javascript表单验证相关知识感兴趣的朋友一起学习吧
    2016-03-03
  • php的派发机制实现方法

    php的派发机制实现方法

    PHP是一种动态类型的编程语言,它支持面向对象编程,在PHP中,派发指在运行时确定要调用的方法或函数的过程,派发机制允许根据实际对象的类型来选择要执行的方法,这种灵活性使得PHP可以实现多态性,本文将给大家介绍php的派发机制是怎么实现的,需要的朋友可以参考下
    2023-10-10
  • jquery插件bootstrapValidator数据验证详解

    jquery插件bootstrapValidator数据验证详解

    这篇文章主要为大家详细介绍了jquery插件bootstrapValidator数据验证使用教程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11

最新评论