爬坑史
最近在做一个医疗项目,有个功能需要前端解析 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 分享给大家
这个案例 带有简单交互工具 支持 移动端 Touch(开箱即用)
如果有什么问题可以发邮件给我 Email: [email protected]
最近有小伙伴下载Demo运行报错,因为github上做了些改动导致的 , 解决办法:将文章中element和script中代码替换掉helloworld中的代码就可以运行了