vue使用医学影像cornerstone展示dcm文件

<template>
	<div id="dicom_canvas" ref='dicom_canvas'></div>
</template>

<script>
	import * as  cornerstone from 'cornerstone-core'
	import * as  dicomParser from 'dicom-parser'
	import * as  cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader'
	export default {
		data() {
			return {
				ImageId: "",
				loaded: false
			}
		},
		props: {
		  Select_url: {
		    type: [String, Number],
		    default: "", //默认值为空现在测试阶段
		  },
		},
		mounted() {
			var element = document.getElementById('dicom_canvas');
			cornerstone.enable(element);
			cornerstoneWADOImageLoader.external.dicomParser = dicomParser
			 cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
			 
			 cornerstoneWADOImageLoader.configure({
			     beforeSend: function(xhr) {
			         // Add custom headers here (e.g. auth tokens)
			         //xhr.setRequestHeader('APIKEY', 'my auth token');
			     },
			 });
			 
			 let url
			 // prefix the url with wadouri: so cornerstone can find the image loader
			 url = "wadouri:" +//http格式的数据文件dcm后缀;
			 // image enable the dicomImage element and activate a few tools
			 this.loadAndViewImage(url);
			 
		},
		methods: {
			loadAndViewImage(imageId) {
			    var element = document.getElementById('dicom_canvas');
			
			    try {
			        var start = new Date().getTime();
			        cornerstone.loadAndCacheImage(imageId).then((image)=> {
			            var viewport = cornerstone.getDefaultViewportForImage(element, image);
			            // document.getElementById('toggleModalityLUT').checked = (viewport.modalityLUT !== undefined);
			            // document.getElementById('toggleVOILUT').checked = (viewport.voiLUT !== undefined);
			            cornerstone.displayImage(element, image, viewport);
						this.$emit('loadedfun')
			            // if(loaded === false) {
			            //     cornerstoneTools.mouseInput.enable(element);
			            //     cornerstoneTools.mouseWheelInput.enable(element);
			            //     cornerstoneTools.wwwc.activate(element, 1); // ww/wc is the default tool for left mouse button
			            //     cornerstoneTools.pan.activate(element, 2); // pan is the default tool for middle mouse button
			            //     cornerstoneTools.zoom.activate(element, 4); // zoom is the default tool for right mouse button
			            //     cornerstoneTools.zoomWheel.activate(element); // zoom is the default tool for middle mouse wheel
			            //     loaded = true;
			            // }
			        }, function(err) {
			            throw err;
			        });
			    }
			    catch(err) {
			        throw err;
			    }
			}
		},
	}
</script>

<style>
</style>