开发小程序多少钱_vue展示dicom文件医疗体系的完

文件医疗系统的实现代码       文件医疗系统的实现代码,非常不错,具有一定的参考借鉴加载,需要的朋友可以参考下

环境:vue、webpack、constone

资料来源及文件:

需要下载的模块:cornerstone--parser

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

.vue

 template 
 div ref="dicomImage" /div 
 /template 
 script 
import * as cornerstone from "cornerstone-core";
import * Parser from "dicom-parser";
// 不建议 npm 安装 cornerstoneWADOImageLoader 如果你做了 会很头疼
let cornerstoneWADOImageLoader = require('../../../static/dist/cornerstoneWADOImageLoader.js')
// import {cornerstoneWADOImageLoader} from "../../../static/dist/cornerstoneWADOImageLoader.js";
//指定要注册加载程序的基石实例
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
//配置 webWorker (必须配置)
// 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: '',
 pro凡科抠图: {
 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) {
 //找到  Image 的元素
 // var element = document.getElementById("dicomImage");
 console.log(1334);
 let element = this.$Image
 cornerstone.enable(element)
 // cornerstone.loadAndCacheImage 函数 负责加载图形 需要 图像地址 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 v-for="(item,key) List" :key="key" @click="imgClcik(item.url)" 
  :imageId="item.url" / 
 /div 

显示结果:

总结

<文件医疗系统的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!