首页 > 编程 > JavaScript > 正文

vue展示dicom文件医疗系统的实现代码

2019-11-19 13:08:39
字体:
来源:转载
供稿:网友

环境:vue、webpack、constone

资料来源及文件:https://github.com/GleasonBian/CornerstoneVueWADO

需要下载的模块:cornerstone-core、dicom-parser

需要下载的js文件:压缩文件可以忽略

显示组件: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文件医疗系统的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表