首页IT科技dicom影像资料怎么看(基于cornerstone.js的dicom医学影像查看浏览功能)

dicom影像资料怎么看(基于cornerstone.js的dicom医学影像查看浏览功能)

时间2025-07-10 18:19:44分类IT科技浏览5702
导读:最近由于项目需求,需要医学影像.dcm文件的预览功能,功能完成后,基于原生Demo做一个开源分享。...

最近由于项目需求                ,需要医学影像.dcm文件的预览功能                   ,功能完成后      ,基于原生Demo做一个开源分享                。

心急的小伙伴可以先看如下基于原生js的全部代码:

一                、全部代码

二                   、基于源码片段的解释

1      、基于以上源码片段            ,做一下分段介绍                   。如下:

1    <script src="https://unpkg.com/hammerjs@2.0.8/hammer.js"></script> 2 <script src="https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.js"></script> 3 <script src="https://unpkg.com/cornerstone-math@0.1.10/dist/cornerstoneMath.min.js"></script> 4 <script src="https://unpkg.com/cornerstone-wado-image-loader@4.1.3/dist/cornerstoneWADOImageLoader.bundle.min.js"></script> 5 <script src="https://unpkg.com/cornerstone-web-image-loader@2.1.1/dist/cornerstoneWebImageLoader.min.js"></script> 6 <script src="https://unpkg.com/cornerstone-tools@6.0.7/dist/cornerstoneTools.js"></script> 7 <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医学文件在页面展示的区域   。

  其他的就是一些固定操作                。

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

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            ”命令解决跨域问题                      。不会的伙伴请参考:http-server服务跨域设置 - ParamousGIS - 博客园 (cnblogs.com) 前端解决跨域问题-nmp安装http-server - 不周客 - 博客园 (cnblogs.com)

声明:本站所有文章      ,如无特殊说明或标注            ,均为本站原创发布               。任何个人或组织                    ,在未征得本站同意时         ,禁止复制               、盗用、采集                   、发布本站内容到任何网站                  、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益        ,可联系我们进行处理                   。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
fusion app代码手册(fusion app自定义事件源码介绍(上))