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

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

主要介绍了vue展示dicom文件医疗系统的实现代码，非常不错，具有一定的参考借鉴加载,需要的朋友可以参考

下

环境：vue、webpack、constone

资料来源及文件：https://github.com/GleasonBian/CornerstoneVueWADO

需要下载的模块：cornerstone-core、dicom-parser

需要下载的js文件：压缩文件可以忽略

显示组件：showDicom.vue

// 不建议 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: {

export default {

name: 'previewDicom',

props: {

imageId: {

type: String,

required: true

}

},

data () {

return {

// }

// },

mounted() {

var url = `wadouri:${this.imageId}`;

this.loadAndViewImage(url);

},

methods: {

loadAndViewImage(imageId) {

//找到 要放置 Dicom Image 的元素

// var element = document.getElementById("dicomImage");

var viewport = cornerstone.getDefaultViewportForImage(element, image);

cornerstone.displayImage(element, image, viewport);

},

function(err) {

console.error(err)

}

);

}