最近由于專案需求，需要醫學影像.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)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500259.html
標籤：其他
上一篇：自己開發的微信智能機器人現已開源
下一篇：JS 將偽陣列轉換成陣列 🎄