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中将具有数字属性名的对象转换为数组
Mar 06 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
Node 代理访问的实现
Sep 19 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
php强制下载类型的实现代码
2011/04/21 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
用Python实现KNN分类算法
2017/12/22 Python
python 剪切移动文件的实现代码
2018/08/02 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
python如何实现图片压缩
2020/09/11 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
台湾家适得:Homeget
2019/02/11 全球购物
会计电算化专业应届大学生求职信
2013/10/22 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书