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 相关文章推荐
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
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删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
Python重新引入被覆盖的自带function
2014/07/16 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
python多线程之事件Event的使用详解
2018/04/27 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
django queryset相加和筛选教程
2020/05/18 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
荷兰电脑专场:Paradigit
2018/05/05 全球购物
护士辞职信模板
2014/01/20 职场文书
《影子》教学反思
2014/02/21 职场文书
停电放假通知
2015/04/14 职场文书
创卫工作总结2015
2015/04/22 职场文书
四年级数学教学反思
2016/02/16 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
Python数据处理的三个实用技巧分享
2022/04/01 Python
python热力图实现的完整实例
2022/06/25 Python