环境: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文件医疗系统的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月27日
2024年09月27日
- 梁静茹.2007-崇拜【相信音乐】【WAV+CUE】
- 金佩姗.1997-喜新恋旧【现代派】【WAV+CUE】
- 梁静茹.2007-崇拜【相信音乐】【WAV+CUE】
- 陈晓东.1997-在乎你感受(EP)【宝丽金】【WAV+CUE】
- 纯音入心系列纯音乐《云水禅心 - 佛曲古筝礼赞1-2》1CD[MP3][190MB]
- 纯音入心系列纯音乐《精心传神-古筝》1CD[MP3][363.1MB]
- 纯音入心系列纯音乐《琴瑟古风之古筝精选曲》1CD[MP3][354.1MB]
- 陈晓东.1997-在乎你感受(EP)【宝丽金】【WAV+CUE】
- 黄凯芹.1990-给你留念(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 张学友.1999-有个人【宝丽金】【WAV+CUE】
- 纯音入心系列纯音乐《古筝佛曲》1CD[MP3][411.1MB]
- 纯音入心系列纯音乐《古筝世界名曲》1CD[MP3][38.9MB]
- 纯音入心系列纯音乐《古筝新奏-菩提妙音》1CD[MP3][112.3MB]
- 陈思安.1993-怀念福建金曲5CD【歌丽美】【WAV+CUE】
- 张学友.1999-有个人【宝丽金】【WAV+CUE】