欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-20 16:34:28
环境:vue、webpack、constone 资料来源及文件:https://github.com/gleasonbian/cornerstonevuewado 需要...

环境: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文件医疗系统的实现代码,希望对大家有所帮助