Cornerstone.js解析Dicom图像并显示

版权声明:Gleason https://blog.csdn.net/bianliuzhu/article/details/80686910

 


爬坑史

做医疗项目这是第二个年头,常见的Dicom图像解析与显示多是桌面应用程序的活,公司的项目提出新的需求,js解析并显示Dicom图像,撸起袖子干就完了, 哎,怪我太年轻小看了Dicom,太尖端了,大大小小的坑爬了不知多少,总结下经验分享给正在爬Dicom坑的小伙伴

探索 Dicom Parser & Display 过程中了解到微云医学影像中使用了 cornerstone.js 实现的 dicom 的解析和显示,小编也花了点时间研究了下这个神奇的库

原理:将 Dicom 图像中的像素数据转换为 64base 编码 然后解析 64base 编码 转换为jpg或png图像  绘制在 canvas 元素上.(原理部分为个人理解,望指正)


实现方法

根据不同需求, 小编给大家提供个两种方案:

以下两种方案都在 github上托管,点击绿色 Clone or download ( 选择 Download ZIP )就OK!

  一. 原生: 

        1.1: 基于 Cornerstone.js 原生(非框架)实现 Dicom 图像 Parser & display  

        1.2: 地址: CornerstoneNative

  二. 框架: 

        2.1:  React 整合案例: React Integration Example 

        2.2:  VueWADO 整合案例: CornerstoneVueWADO  Dicom Image Parser & Display

        2.3:  VueWEB 整合案例: cornerstoneVueWEB         JPG Image Parser & Display

        2.4:  vue + based on DWVDicomViewer                 DWV 实现 dicom parser & Display

  三. 医学影像工具

        3.1 : 浏览器中显示Dicom图像,满足基本需求,还需要影像交互工具  Cornerstone Tools 

        3.2 : 工具使用例子 : cornerstoneToolsExamples 


与 Vue 集成 

  四.准备工作

4.1:首先基于Vue cli 搭建一个新的Vue项目(不知道的自己百度)

4.2:将初始化的Vue项目中多余的东西都删除直到呈现一个空白页面就可以了(控制台 无 error)

4.3:安装 解析 Dicom 图像的依赖项

    # 安装 cornerstone.js 核心
    $ npm install cornerstone-core --save
    # 安装 dicomParser 
    $ npm install dicom-parser --save

4.4:在项目static目录下创建dist文件夹

4.5:将下面链接 保存到 dist 文件夹下

4.6: 全局 引入使用 cornerstone 

到此 准备工作 结束


五.代码实现 (极简化Display Dicom)

5.1:打开 Helloworld.vue 文件 

5.2:在template标签中添加如下html片段

  <div class="container">
    <div class="enterURL">
      <input type="text" id="wadoURL" style="width: 35%;" placeholder="Enter WADO URL" value="http://127.0.0.1/testDICOM/CTStudy/1.5191KB.DCM">
      <button type="button" id="downloadAndView">加载Dicom</button>
    </div>
    <div id="loadProgress" style="position:relative;left:-15%">Dicom加载:</div>
    <div style="width:512px; height:512px; position:relative; color:white; display:inline-block; border-style:solid; border-color:black;"
      oncontextmenu="return false" class='disable-selection noIbar' unselectable='on' onselectstart='return false;' onmousedown='return false;'>
      <div id="dicomImage" style="width:512px;height:512px;top:0px;left:0px; position:absolute">
      </div>
    </div>
  </div>

5.3:script 标签中 添加 如下js代码

//引入 cornerstone,dicomParser,cornerstoneWADOImageLoader
import * as cornerstone from "cornerstone-core";
import * as dicomParser from "dicom-parser";

// 不建议 npm 安装 cornerstoneWADOImageLoader 如果你做了 会很头疼 
import * as cornerstoneWADOImageLoader from "../../static/dist/cornerstoneWADOImageLoader.js";

//指定要注册加载程序的基石实例
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;

/*
*配置 webWorker (必须配置)
*
*注意这里的路径问题  如果路径不对 cornerstoneWADOImageLoaderWebWorker 会报错:
*        "index.html Uncaught SyntaxError: Unexpected token <"
*
*/
var config = {
  webWorkerPath: "/static/dist/cornerstoneWADOImageLoaderWebWorker.js",
  taskConfiguration: {
    decodeTask: {
      codecsPath: "/static/dist/cornerstoneWADOImageLoaderCodecs.js"
    }
  }
};
cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  methods: {
    //当点击加载图像时 调用 loadAndViewImage 加载 Dicom 图像
    loadAndViewImage(imageId) {
      //找到 要放置 Dicom Image 的元素
      var element = document.getElementById("dicomImage");
      // cornerstone.loadAndCacheImage 函数 负责加载图形 需要 图像地址 imageId
      cornerstone.loadAndCacheImage(imageId).then(
        function(image) {
          var viewport = cornerstone.getDefaultViewportForImage(element, image);
          cornerstone.displayImage(element, image, viewport);
        },
        function(err) {
          alert(err);
        }
      );
    }
  },
  mounted() {
    const _this = this;
    var element = document.getElementById("dicomImage");
    cornerstone.enable(element);
    // 为 加载Dicom 按钮添加 点击事件 拼接 url 调用 loadAndViewImage 函数
    document
      .getElementById("downloadAndView")
      .addEventListener("click", function(e) {
        let url = document.getElementById("wadoURL").value;
        // 拼接url
        url = "wadouri:" + url;
        // 调用这个函数加载像,和激活工具
        _this.loadAndViewImage(url);
      });
    // Dicom 加载 进度
    cornerstone.events.addEventListener(
      "cornerstoneimageloadprogress",
      function(event) {
        const eventData = event.detail;
        const loadProgress = document.getElementById("loadProgress");
        loadProgress.textContent = `Dicom加载: ${eventData.percentComplete}%`;
      }
    );
  }
};

5.4:style 标签中 样式自己写吧  ....

老夫掐指一算有小伙伴脑容量不够了, 把老夫的 CornerstoneVueWADO 分享给大家

  1.  https://github.com/GleasonBian/InteractiveMedicalImages
  2. https://github.com/GleasonBian/cornerstoneVueWEB
  3. https://github.com/GleasonBian/CornerstoneVueWADO
  4. https://github.com/GleasonBian/DicomParsing
  5. https://github.com/GleasonBian/CornerstoneNative
  6. https://github.com/GleasonBian/DWVDicomViewer
  7. https://github.com/GleasonBian/DicomViewer 
  8. 以上 是整理的所有关于 dicom 图像的程序 

Cannot GET 报错处理

最近有小伙伴下载Demo运行报错:

原因: 项目本地打包时,在config-->index.js中assetsPublicPath: './' 加了点
push到github上时 忘记去掉了
解决办法 : 将项目中 config/index.js中 
assetsPublicPath: './' 去掉(共有两处)

如果是下载 github 上的项目 不用去点 项目已经将点去掉了

如有错误烦请指正 ----  Email: bianliuzhu@gmail.com

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页