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 写类方式之六
Jul 05 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 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
xml+php动态载入与分页
2006/10/09 PHP
类的另类用法--数据的封装
2006/10/09 PHP
域名查询代码公布
2006/10/09 PHP
PHP 数组入门教程小结
2009/05/20 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python书单 不将就
2017/07/11 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
Python3爬虫全国地址信息
2019/01/05 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
python opencv实现图像配准与比较
2021/02/09 Python
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
班级口号大全
2014/06/09 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
2014年度工作总结报告
2014/12/15 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang