vue展示dicom文件,医疗系统。
环境:vue、webpack、constone
资料来源及文件:https://github.com/GleasonBian/CornerstoneVueWADO
需要下载的模块:cornerstone-core、dicom-parser
需要下载的js文件:压缩文件可以忽略
显示组件:showDicom.vue
<template>
<div class="dicom" ref="dicomImage"></div>
</template>
<script>
import * as cornerstone from "cornerstone-core";
import * as dicomParser from "dicom-parser";
// 不建议 npm 安装 cornerstoneWADOImageLoader 如果你做了 会很头疼
let cornerstoneWADOImageLoader = require('../../../static/dist/cornerstoneWADOImageLoader.js')
// import {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: 'previewDicom',
props: {
imageId: {
type: String,
required: true
}
},
data () {
return {
}
},
// watch:{
// imageId(newValue,oldValue){
// var url = `wadouri:${this.imageId}`;
// this.loadAndViewImage(url);
// }
// },
mounted() {
var url = `wadouri:${this.imageId}`;
this.loadAndViewImage(url);
},
methods: {
loadAndViewImage(imageId) {
//找到 要放置 Dicom Image 的元素
// var element = document.getElementById("dicomImage");
console.log(1334);
let element = this.$refs.dicomImage
cornerstone.enable(element)
// cornerstone.loadAndCacheImage 函数 负责加载图形 需要 图像地址 imageId
cornerstone.loadAndCacheImage(imageId).then(
function(image) {
var viewport = cornerstone.getDefaultViewportForImage(element, image);
cornerstone.displayImage(element, image, viewport);
},
function(err) {
console.error(err)
}
);
}
}
}
</script>
<style scoped>
.dicom{
height: 100%;
}
</style>
引入组件,注册,使用:
<div class="son" v-for="(item,key) in dicomList" :key="key" @click="imgClcik(item.url)">
<preview-dicom :imageId="item.url"></preview-dicom>
</div>
dicomList:[
{
url:'http://127.0.0.1/testDICOM/CTStudy/3.719KB.DCM',
},
{
url:'http://127.0.0.1/testDICOM/CTStudy/3.719KB.DCM',
},
{
url:'http://127.0.0.1/testDICOM/CTStudy/test.dcm',
},
{
url:'http://127.0.0.1/testDICOM/CTStudy/1.5191KB.DCM',
},
{
url:'http://127.0.0.1/testDICOM/CTStudy/1.5191KB.DCM',
},
{
url:'http://127.0.0.1/testDICOM/CTStudy/1.5191KB.DCM',
}
],
显示结果:
基本ok。
vue展示dicom文件,医疗系统。的更多相关文章
- vue展示md文件,前端读取展示markdown文件
方案1:每次都需要重新打包,每次修改都需要build 直接使用require + v-html: 核心代码如下: 1. 首先需要添加MD文件的loader就是 markdown-loader npm ...
- 【vue环境】vue : 无法加载文件 C:\Users\1111111\AppData\Roaming\npm\vue.ps1,因为在此系统禁止运行脚本
在用脚手架搭建vue项目时,提示:无法加载文件 C:\Users\1111111\AppData\Roaming\npm\vue.ps1,因为在此系统禁止运行脚本 这是你笔记本禁止运行脚本,解决办法 ...
- 吴裕雄 python 人工智能——智能医疗系统后台用户复诊模块简约版代码展示
#复诊 import sys import os import time import operator import cx_Oracle import numpy as np import pand ...
- 吴裕雄 python 人工智能——智能医疗系统后台用户注册、登录和初诊简约版代码展示
#用户注册.登录模块 #数据库脚本 CREATE TABLE usertable( userid number(8) primary key not null , username varchar(5 ...
- Dicom文件转mhd,raw文件格式
最近在整理与回顾刚加入实验室所学的相关知识,那会主要是对DICOM这个医疗图像进行相应的研究,之前有一篇博客已经讲述了一些有关DICOM的基本知识,今天这篇博客就让我们了解一下如何将Dicom文件转为 ...
- vue中的文件上传和下载
文件上传 vue中的文件上传主要分为两步:前台获取到文件和提交到后台 获取文件 前台获取文件,主要是采用input框来实现 <el-dialog :title="addName&quo ...
- 引擎设计跟踪(九.9) 文件包系统(Game Package System)
很早之前,闪现过写文件包系统的想法, 但是觉得还没有到时候. 由于目前工作上在做android ndk开发, 所以业余时间趁热做了android的移植, 因为android ndk提供的mountab ...
- 基于BT协议的文件分发系统
基于BT协议的文件分发系统构成: 1.一个Web服务器:保存着种子文件 2.一个种子文件:保存共享文件的一些信息(文件名,文件大小 ,Tracker服务器地址,torrent为后缀) ...
- 基于xml文件实现系统属性配置管理
文章标题:基于xml文件实现系统属性配置管理 . 文章地址: http://blog.csdn.net/5iasp/article/details/11774501 作者: javaboy2012 E ...
随机推荐
- Forth 采用CODE定义新词
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- Mosquitto-1.5在Linux上的安装以及Android客户端的实现
一.关于MQTT MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的" ...
- numpy.where() 用法详解
numpy.where (condition[, x, y]) numpy.where() 有两种用法: 1. np.where(condition, x, y) 满足条件(condition),输出 ...
- 关于Java的特点之继承
继承--解决之道 继承可以解决代码复用,让我们的编程更加靠近人类思维.当多个类存在相同的属性(变量)和方法时,可以从这些类中抽象出父类(比如刚才的Student),在父类中定义这些相同的属性和方法,所 ...
- Problem B: 类的初体验(II)
Description 定义一个类Data,只有一个double类型的属性和如下3个方法: 1. 带1个参数的构造函数——初始化属性值为参数值. 2. double getValue()——获 ...
- Eclipse错误集合
一.Could not write metadata for '/RemoteSystemsTempFiles'. 错误代码 Could not write metadata for '/Remote ...
- nodejs -- http模块. request() 方法 , get方法.
1. request方法: 提交评论到慕课网: var http = require('http'); var querystring = require('querystring'); var po ...
- wav文件格式分析与详解
WAV文件是在PC机平台上很常见的.最经典的多媒体音频文件,最早于1991年8月出现在Windows 3.1操作系统上,文件扩展名为WAV,是WaveFom的简写,也称为波形文件,可直接存储声音波形, ...
- MySQL设置空密码
因为刚安装的时候,MySQL强制设置密码,但是我需要设置MySQL为空密码 语句: ';
- 数据持久化系列之Mysql
一.命令行操作 1.显示所有库: show databases; 2.要操作某个库,比如库名: db_book:use db_book; 3.查看表的基本结构,比如表名: t_book:desc t_ ...