欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2018年08月27日 11:39:12   作者:不愛(ài)貞子愛(ài)爽子  
這篇文章主要介紹了vue展示dicom文件醫(yī)療系統(tǒng)的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒加載,需要的朋友可以參考下

環(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)文章

  • Vue?dialog模態(tài)框的封裝方法

    Vue?dialog模態(tài)框的封裝方法

    這篇文章主要為大家詳細(xì)介紹了Vue?dialog模態(tài)框的封裝方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • vue實(shí)現(xiàn)zip文件下載

    vue實(shí)現(xiàn)zip文件下載

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)zip文件下載,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • Vue3新特性之在Composition API中使用CSS Modules

    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)題

    這篇文章主要介紹了正確更改Ant?Design?of?Vue樣式的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Ant design vue中的聯(lián)動(dòng)選擇取消操作

    Ant design vue中的聯(lián)動(dòng)選擇取消操作

    這篇文章主要介紹了Ant design vue中的聯(lián)動(dòng)選擇取消操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-10-10
  • vue實(shí)現(xiàn)日歷組件

    vue實(shí)現(xiàn)日歷組件

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)日歷組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • 使用vuex較為優(yōu)雅的實(shí)現(xiàn)一個(gè)購(gòu)物車(chē)功能的示例代碼

    使用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-12
  • element 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ī)則)

    這篇文章主要介紹了element el-table如何實(shí)現(xiàn)表格動(dòng)態(tài)增加/刪除/編輯表格行(帶校驗(yàn)規(guī)則),本篇文章記錄el-table增加一行可編輯的數(shù)據(jù)列,進(jìn)行增刪改,感興趣的朋友跟隨小編一起看看吧
    2024-07-07
  • vue中緩存組件keep alive的介紹及使用方法

    vue中緩存組件keep alive的介紹及使用方法

    這篇文章主要介紹了vue緩存組件keepalive的相關(guān)資料,keep-alive組件是使用 include exclude這兩個(gè)屬性傳入組件名稱(chēng)來(lái)確認(rèn)哪些可以被緩存的,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2022-08-08
  • vue移動(dòng)端寫(xiě)的拖拽功能示例代碼

    vue移動(dòng)端寫(xiě)的拖拽功能示例代碼

    這篇文章主要介紹了vue移動(dòng)端寫(xiě)的拖拽功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-09-09

最新評(píng)論