最近由于项目需求 ，需要医学影像.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)
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
