基於cornerstone.js的dicom醫學影像查看瀏覽功能

2022 年 7 月 25 日
筆記
HTML, Node.js, Web前端

最近由於項目需求，需要醫學影像.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="//unpkg.com/[email protected]/hammer.js"></script>
    <script src="//unpkg.com/[email protected]/dist/cornerstone.js"></script>
    <script src="//unpkg.com/[email protected]/dist/cornerstoneMath.min.js"></script>
    <script src="//unpkg.com/[email protected]/dist/cornerstoneWADOImageLoader.bundle.min.js"></script>
    <script src="//unpkg.com/[email protected]/dist/cornerstoneWebImageLoader.min.js"></script>
    <script src="//unpkg.com/[email protected]/dist/cornerstoneTools.js"></script>
    <script src="//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://127.0.0.1:6699/ctdcm1.dcm";
    var imageId = "wadouri: ////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="//unpkg.com/[email protected]/hammer.js"></script>
2     <script src="//unpkg.com/[email protected]/dist/cornerstone.js"></script>
3     <script src="//unpkg.com/[email protected]/dist/cornerstoneMath.min.js"></script>
4     <script src="//unpkg.com/[email protected]/dist/cornerstoneWADOImageLoader.bundle.min.js"></script>
5     <script src="//unpkg.com/[email protected]/dist/cornerstoneWebImageLoader.min.js"></script>
6     <script src="//unpkg.com/[email protected]/dist/cornerstoneTools.js"></script>
7     <script src="//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://127.0.0.1:6699/ctdcm1.dcm";
    var imageId = "wadouri: ////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)

Tags: HTML Node.js Web前端