爬坑史

        最近在做一个医疗项目,有个功能需要前端解析 Dicom 图像并显示在页面上,从来没玩过这玩应, Dicom 是啥都不清楚,查阅了好多资料,做了n+1个Demo,爬了不少坑,才算闹得清楚,总结下经验,分享给需要的小伙伴.

       探索 Dicom Parser & Display 过程中接触到很多出色案例,比如国内做的比较好的星云医学影像,国外的 cornerstone 都是基于 cornerstone.js 实现的,小编也花了点时间研究了下这个神奇的库,原理:将 Dicom 图像中的像素数据转换为 64base 编码 然后解析 64base 编码 转换为jpg或png图像  绘制在 canvas 元素上.

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

以下两种方案都在 github 上托管 直接 点击绿色 Clone or download ( 选择 Download ZIP )就可以了

    1. 原生: 

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

        1.2: 地址: CornerstoneNative

    2. 框架: 

        2.1: 与 React 整合案例: React Integration Example 

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

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

    3. 医学影像工具 Cornerstone Tools 

        3.1 : 能够在浏览器中看到Dicom图像,只满足基本需求,还需要影像交互工具  Cornerstone Tools  需要什么工具自己添加

接下来详细聊聊 如何与 Vue 整合 ,这个比较难了(注意看),翠花上酸菜!

准备工作

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

    2.将初始化的Vue项目中多余的东西都删除直到呈现一个空白页面就可以了(控制塔不能有 error)

    3.安装 解析 Dicom 图像的依赖项

    # 安装 cornerstone
    npm install cornerstone-core --save

    # 安装 dicomParser
    npm install dicom-parser --save

    4.在项目static目录下创建dist文件夹

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

•  cornerstoneWADOImageLoader.js
• cornerstoneWADOImageLoaderCodecs.js
• cornerstoneWADOImageLoaderWebWorker.js

代码实现 (极简化Display Dicom)

   打开 Helloworld.vue 文件 

    1.在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>

2.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}%`;
      }
    );
  }
};

3.style 标签中

    样式自己写吧  ....

最后....

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

    CornerstoneVueWADO

    这个案例 带有简单交互工具 支持 移动端 Touch(开箱即用)

如果有什么问题可以发邮件给我 Email: [email protected]

最近有小伙伴下载Demo运行报错,因为github上做了些改动导致的 , 解决办法:将文章中element和script中代码替换掉helloworld中的代码就可以运行了