最近由於項目需求，需要醫學影像.dcm文件的預覽功能，功能完成後，基於原生Demo做一個開源分享。 心急的小伙伴可以先看如下基於原生js的全部代碼： 一、全部代碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
最近由於項目需求，需要醫學影像.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/[email protected]/hammer.js"></script> <script src="https://unpkg.com/[email protected]/dist/cornerstone.js"></script> <script src="https://unpkg.com/[email protected]/dist/cornerstoneMath.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/cornerstoneWADOImageLoader.bundle.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/cornerstoneWebImageLoader.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/cornerstoneTools.js"></script> <script src="https://unpkg.com/[email protected]/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、基於以上源碼片段，做一下分段介紹。如下：
1 <script src="https://unpkg.com/[email protected]/hammer.js"></script> 2 <script src="https://unpkg.com/[email protected]/dist/cornerstone.js"></script> 3 <script src="https://unpkg.com/[email protected]/dist/cornerstoneMath.min.js"></script> 4 <script src="https://unpkg.com/[email protected]/dist/cornerstoneWADOImageLoader.bundle.min.js"></script> 5 <script src="https://unpkg.com/[email protected]/dist/cornerstoneWebImageLoader.min.js"></script> 6 <script src="https://unpkg.com/[email protected]/dist/cornerstoneTools.js"></script> 7 <script src="https://unpkg.com/[email protected]/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)
