基于cornerstone.js的dicom醫學影像查看瀏覽功能-有解無憂

最近由于專案需求，需要醫學影像.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/500256.html

標籤：JavaScript

上一篇：自己開發的微信智能機器人現已開源

下一篇：JS 將偽陣列轉換成陣列 🎄