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 相关文章推荐
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
javascript每日必学之继承
Feb 23 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 Javascript
JS实现纸牌发牌动画
Jan 19 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
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
JS实现页面内跳转的简单代码
2017/09/03 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
Python常用的爬虫技巧总结
2016/03/28 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
matplotlib实现区域颜色填充
2019/03/18 Python
Python 私有化操作实例分析
2019/11/21 Python
解决Python二维数组赋值问题
2019/11/28 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
小学教师的个人自我鉴定
2013/10/24 职场文书
报到证丢失证明
2014/01/11 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
党支部三会一课计划
2014/09/24 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
初三英语教学反思
2016/02/15 职场文书