快捷導(dǎo)航

基于cornerstone.js的dicom醫(yī)學(xué)影像查看瀏覽功能

更新時(shí)間：2022年07月25日 10:23:49 作者：莫頎

這篇文章主要介紹了基于cornerstone.js的dicom醫(yī)學(xué)影像查看瀏覽功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、全部代碼

<!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/hammerjs@2.0.8/hammer.js"></script>
    <script src="https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.js"></script>
    <script src="https://unpkg.com/cornerstone-math@0.1.10/dist/cornerstoneMath.min.js"></script>
    <script src="https://unpkg.com/cornerstone-wado-image-loader@4.1.3/dist/cornerstoneWADOImageLoader.bundle.min.js"></script>
    <script src="https://unpkg.com/cornerstone-web-image-loader@2.1.1/dist/cornerstoneWebImageLoader.min.js"></script>
    <script src="https://unpkg.com/cornerstone-tools@6.0.7/dist/cornerstoneTools.js"></script>
    <script src="https://unpkg.com/dicom-parser@1.8.13/dist/dicomParser.min.js"></script>
</head>
<body>
    <!-- 用于加載圖片的div區(qū)域 -->
    <div id="dicomImage" style="width: 512px;height: 512px;"></div>
</body>
<script>
    // 注冊(cè)并掛載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區(qū)域
    var element = document.getElementById('dicomImage');
    //激活獲取到的用于圖片加載的區(qū)域
    cornerstone.enable(element);
    // 從cornerstoneTools庫(kù)中獲取窗寬,窗高工具
    const WwwcTool = cornerstoneTools.WwwcTool;
    //添加獲取到的窗寬,窗高工具
    cornerstoneTools.addTool(WwwcTool);
    // 綁定工具操作功能到鼠標(biāo)左鍵
    cornerstoneTools.setToolActive('Wwwc', {
        mouseButtonMask: 1
    })
    //使用loadAndCacheImage()方法加載并緩存圖片，然后使用displayImage()方法顯示圖片。
    cornerstone.loadAndCacheImage(imageId).then(function (image) {
        cornerstone.displayImage(element, image);
    })
</script>
</html>

二、基于源碼片段的解釋

1、基于以上源碼片段，做一下分段介紹。如下：

<script src="https://unpkg.com/hammerjs@2.0.8/hammer.js"></script>
    <script src="https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.js"></script>
    <script src="https://unpkg.com/cornerstone-math@0.1.10/dist/cornerstoneMath.min.js"></script>
    <script src="https://unpkg.com/cornerstone-wado-image-loader@4.1.3/dist/cornerstoneWADOImageLoader.bundle.min.js"></script>
    <script src="https://unpkg.com/cornerstone-web-image-loader@2.1.1/dist/cornerstoneWebImageLoader.min.js"></script>
    <script src="https://unpkg.com/cornerstone-tools@6.0.7/dist/cornerstoneTools.js"></script>
    <script src="https://unpkg.com/dicom-parser@1.8.13/dist/dicomParser.min.js"></script>

如上代碼主要為引入所需js庫(kù)代碼：

第一行中引入hammer.js庫(kù)，hammer.js是一款開(kāi)源的移動(dòng)端腳本框架，它可以完美的實(shí)現(xiàn)在移端開(kāi)發(fā)的大多數(shù)事件，如：點(diǎn)擊、滑動(dòng)、拖動(dòng)、多點(diǎn)觸控等事件。這里用在pc端，也可以有很好的鼠標(biāo)拖動(dòng)等效果的實(shí)現(xiàn)。

第二行中引入cornerstone.js庫(kù)，Corenerstone 是一個(gè)旨在搭建一個(gè)完全基于web的醫(yī)學(xué)影像平臺(tái)的開(kāi)源項(xiàng)目。Cornerstone Core組件是一個(gè)在支持HTML5 canvas元素的現(xiàn)代瀏覽器上顯示醫(yī)學(xué)影像的輕量級(jí)的JavaScript庫(kù)。

第三行引入cornerstoneMath.min.js庫(kù)，該庫(kù)主要包含對(duì)醫(yī)學(xué)影像文件的一些操作的技術(shù)，例如使用cornerstone工具庫(kù)中的測(cè)量工具時(shí)，就需要該庫(kù)文件提供數(shù)學(xué)計(jì)算支持。

第四行中引入cornerstoneWADOImageLoader.bundle.min.js庫(kù)，主要用于對(duì)DICOM醫(yī)學(xué)影像文件的支持。

第五行引入cornerstoneWebImageLoader.min.js主要用于對(duì)于非DICOM醫(yī)學(xué)影像文件的網(wǎng)絡(luò)圖片的支持。

第六行引入cornerstoneTools.js庫(kù)，該庫(kù)時(shí)基于cornerstone的工具庫(kù)，具備畫(huà)線測(cè)距，測(cè)量夾角，改變色差，拖動(dòng)影像等醫(yī)學(xué)影像基礎(chǔ)常用功能。

第七行引入dicomParser.min.js庫(kù)，該庫(kù)主要用于對(duì)DICOM醫(yī)學(xué)影像文件圖片及圖片信息進(jìn)行解析。

 <!-- 用于加載圖片的div區(qū)域 -->
    <div id="dicomImage" style="width: 512px;height: 512px;"></div>

2、這里就是一個(gè)用于將DICOM醫(yī)學(xué)文件在頁(yè)面展示的區(qū)域。

// 注冊(cè)并掛載cornerstone及其cornerstoneTools，固定操作
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
    cornerstoneTools.external.Hammer = Hammer;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;

3、這里是對(duì)cornerstone庫(kù)及dicom文件渲染其相關(guān)庫(kù)文件的注冊(cè)掛載，固定格式，不要更改。

// 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區(qū)域
    var element = document.getElementById('dicomImage');
    //激活獲取到的用于圖片加載的區(qū)域
    cornerstone.enable(element);
    // 從cornerstoneTools庫(kù)中獲取窗寬,窗高工具
    const WwwcTool = cornerstoneTools.WwwcTool;
    //添加獲取到的窗寬,窗高工具
    cornerstoneTools.addTool(WwwcTool);

4、這里就是注釋中說(shuō)的那樣，就是一些固定步驟。

imageId：官方文檔規(guī)定的.dcm圖片地址，也就是需要展示的DICOM醫(yī)學(xué)影像文件的網(wǎng)絡(luò)地址。
dicomImage：這里就是在html代碼中自己定義的用于將DICOM醫(yī)學(xué)文件在頁(yè)面展示的區(qū)域。

其他的就是一些固定操作。

// 綁定工具操作功能到鼠標(biāo)左鍵
    cornerstoneTools.setToolActive('Wwwc', {
        mouseButtonMask: 1
    })
    //使用loadAndCacheImage()方法加載并緩存圖片，然后使用displayImage()方法顯示圖片。
    cornerstone.loadAndCacheImage(imageId).then(function (image) {
        cornerstone.displayImage(element, image);
    })

5、這是最后的兩步。1~4行代碼，用于將前面寫(xiě)的‘獲取窗寬,窗高工具’功能綁定到鼠標(biāo)的左鍵，用于在圖片上按住鼠標(biāo)左鍵時(shí)，可以實(shí)現(xiàn)拖動(dòng)改變色差的效果。

setToolActive()：該方法用于激活并綁定某功能到某個(gè)操作鍵。　　mouseButtonMask: 1：該含義為綁定到鼠標(biāo)左鍵。
　　loadAndCacheImage()：該方法用于加載并緩存DICOM圖片及圖片的數(shù)據(jù)。最大緩存為1GB
　　displayImage(element, image):該方法用于在我們?cè)O(shè)定的網(wǎng)頁(yè)區(qū)域展示解析后的DICOM圖片

6、至此，我們已經(jīng)完成了所以代碼。

注意：（1）由于我們用的是在線Js庫(kù)文件，所以需要等待后在能看到圖片效果.

（2）imageId 是博主自己設(shè)置的本地服務(wù)器的dcm圖片地址，請(qǐng)?zhí)鎿Q為你自己服務(wù)器的dcm圖片地址。如果對(duì)node.js有了解的大佬，可以使用http-server本地服務(wù)器包，自己快速搭建本地服務(wù)器用于測(cè)試，但是需要注意跨域問(wèn)題。可以使用： http-server --cors 命令替代“http-server”命令解決跨域問(wèn)題。

到此這篇關(guān)于基于cornerstone.js的dicom醫(yī)學(xué)影像查看瀏覽功能的文章就介紹到這了,更多相關(guān)cornerstone.js dicom醫(yī)學(xué)影像查看瀏覽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: