vue展示dicom文件醫(yī)療系統(tǒng)的實(shí)現(xiàn)代碼
環(huán)境:vue、webpack、constone
資料來(lái)源及文件: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 如果你做了 會(huì)很頭疼 let cornerstoneWADOImageLoader = require('../../../static/dist/cornerstoneWADOImageLoader.js') // import {cornerstoneWADOImageLoader} from "../../../static/dist/cornerstoneWADOImageLoader.js"; //指定要注冊(cè)加載程序的基石實(shí)例 cornerstoneWADOImageLoader.external.cornerstone = cornerstone; //配置 webWorker (必須配置) //注意這里的路徑問(wèn)題 如果路徑不對(duì) cornerstoneWADOImageLoaderWebWorker 會(huì)報(bào)錯(cuò) 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 函數(shù) 負(fù)責(zé)加載圖形 需要 圖像地址 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>
引入組件,注冊(cè),使用:
<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', } ],
顯示結(jié)果:
總結(jié)
以上所述是小編給大家介紹的vue展示dicom文件醫(yī)療系統(tǒng)的實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue3新特性之在Composition API中使用CSS Modules
這篇文章主要介紹了Vue3新特性之在Composition API中使用CSS Modules,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07正確更改Ant?Design?of?Vue樣式的問(wèn)題
這篇文章主要介紹了正確更改Ant?Design?of?Vue樣式的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Ant design vue中的聯(lián)動(dòng)選擇取消操作
這篇文章主要介紹了Ant design vue中的聯(lián)動(dòng)選擇取消操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10使用vuex較為優(yōu)雅的實(shí)現(xiàn)一個(gè)購(gòu)物車(chē)功能的示例代碼
這篇文章主要介紹了使用vuex較為優(yōu)雅的實(shí)現(xiàn)一個(gè)購(gòu)物車(chē)功能的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12element el-table如何實(shí)現(xiàn)表格動(dòng)態(tài)增加/刪除/編輯表格行(帶校驗(yàn)規(guī)則)
這篇文章主要介紹了element el-table如何實(shí)現(xiàn)表格動(dòng)態(tài)增加/刪除/編輯表格行(帶校驗(yàn)規(guī)則),本篇文章記錄el-table增加一行可編輯的數(shù)據(jù)列,進(jìn)行增刪改,感興趣的朋友跟隨小編一起看看吧2024-07-07