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 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
js function定义函数使用心得
Apr 15 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
详解JavaScript中return的用法
May 08 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 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
php学习之 认清变量的作用范围
2010/01/26 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
Python字符串处理实例详解
2017/05/18 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
毕业学生推荐信
2013/12/01 职场文书
骨干教师事迹材料
2014/12/17 职场文书
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL