溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue展示dicom文件醫(yī)療系統(tǒng)的實(shí)現(xiàn)代碼

發(fā)布時(shí)間：2020-09-18 12:36:11 來源：腳本之家 閱讀：742 作者：不愛貞子愛爽子 欄目：web開發(fā)

環(huán)境：vue、webpack、constone

資料來源及文件：https://github.com/GleasonBian/CornerstoneVueWADO

需要下載的模塊：cornerstone-core、dicom-parser

需要下載的js文件：壓縮文件可以忽略

vue展示dicom文件醫(yī)療系統(tǒng)的實(shí)現(xiàn)代碼

顯示組件：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";
//指定要注冊加載程序的基石實(shí)例
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
//配置 webWorker (必須配置)
//注意這里的路徑問題 如果路徑不對 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>

引入組件，注冊，使用：

 <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é)果：

vue展示dicom文件醫(yī)療系統(tǒng)的實(shí)現(xiàn)代碼

總結(jié)

以上所述是小編給大家介紹的vue展示dicom文件醫(yī)療系統(tǒng)的實(shí)現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手