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 相关文章推荐
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 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
星际实力自我测试
2020/03/04 星际争霸
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
python 生成器协程运算实例
2017/09/04 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
C/C++程序员常见面试题二
2015/11/19 面试题
房地产销售员的自我评价分享
2013/12/04 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
四年级作文之植物
2019/09/20 职场文书