vue展示dicom文件医疗系统的实现代码


Posted in Javascript onAugust 27, 2018

环境:vue、webpack、constone

资料来源及文件:https://github.com/GleasonBian/CornerstoneVueWADO

需要下载的模块:cornerstone-core、dicom-parser

需要下载的js文件:压缩文件可以忽略

vue展示dicom文件医疗系统的实现代码

显示组件: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',
  }
],

显示结果:

vue展示dicom文件医疗系统的实现代码

总结

以上所述是小编给大家介绍的vue展示dicom文件医疗系统的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
js实现登录验证码
Dec 22 Javascript
canvas知识总结
Jan 25 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 #Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 #Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 #Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 #Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 #Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 #Javascript
vue监听input标签的value值方法
Aug 27 #Javascript
You might like
php header示例代码(推荐)
2010/09/08 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
python实现telnet客户端的方法
2015/04/15 Python
Python数据操作方法封装类实例
2017/06/23 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
django基于restframework的CBV封装详解
2019/08/08 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
python读取与处理netcdf数据方式
2020/02/14 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
初中三年学生的学习自我评价
2013/11/13 职场文书
卫校中专生的自我评价
2014/01/15 职场文书
环保标语口号
2014/06/13 职场文书
2014年班组工作总结
2014/11/20 职场文书
运动会开幕式致辞
2015/07/29 职场文书
装修安全责任协议书
2016/03/22 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
nginx设置资源请求目录的方式详解
2022/05/30 Servers