如何使用基石在angular 7项目中加载dicom文件

Question

我想加载一个放置在IIS虚拟目录中的dicom文件，我正在使用cornestone-wado-image-loader实现相同的目的。但我得到以下错误：

“ TypeError：无法在'FileReader'上执行'readAsArrayBuffer'：参数1不是'Blob'类型。在_global。（匿名函数）。（匿名函数）[作为readAsArrayBuffer]（http://localhost:4200/polyfills.js:4589:60）在http://localhost:4200/vendor.js:138552:35977在新的ZoneAwarePromise（http://localhost:4200/polyfills.js:4111:29）在Ie（http://localhost:4200/vendor.js:138552:35867）在Object.load（http://localhost:4200/vendor.js:138552:31691）在Ae（http://localhost:4200/vendor.js:138552:37680）在loadImageFromImageLoader（http://localhost:4200/vendor.js:96174:25）在Object.loadAndCacheImage（http://localhost:4200/vendor.js:96237:21）在ViewImageComponent.ngAfterViewInit（http://localhost:4200/main.js:777:65）在callProviderLifecycles（http://localhost:4200/vendor.js:66735:18）“

我为此写的代码是：

import {Component,OnInit,Input,ElementRef,ViewChild, AfterViewInit} from "@angular/core";
import cornerstone from "cornerstone-core";
import cornerstoneMath from "cornerstone-math";
import cornerstoneTools from "cornerstone-tools";
import Hammer from "hammerjs";
import cornerstoneWebImageLoader from "cornerstone-web-image-loader";
import cornerstoneWADOImageLoader from "cornerstone-wado-image-loader";
import { Router, ActivatedRoute } from "@angular/router";
import { switchMap, map } from "rxjs/operators";
import dicomParser from "dicom-parser";

var config = {
   maxWebWorkers: navigator.hardwareConcurrency || 1,
   startWebWorkersOnDemand: true,
};

cornerstoneWADOImageLoader.webWorkerManager.initialize(config);

@Component({
  selector: "app-view-image",
  templateUrl: "./view-image.component.html",
  styleUrls: ["./view-image.component.css"]
})
export class ViewImageComponent implements OnInit, AfterViewInit {

  constructor(private router: Router, private route: ActivatedRoute) {
  }

  ngOnInit() {
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
  }

  ngAfterViewInit() {

    const element = document.querySelector(".image-canvas");

    const DCMPath = "http://localhost/images/Abdomen.Dcm";
    cornerstone.enable(element);

    cornerstone.loadAndCacheImage("dicomfile:" + DCMPath).then(imageData => {
      console.log(imageData);
      cornerstone.displayImage(element, imageData);
    }).catch( error => { console.error(error) });

    cornerstoneWADOImageLoader.wadouri.fileManager.remove(imageID);
  }
 
}

我的package.json具有以下版本的依赖项：

“ cornerstone-core”：“ ^ 2.3.0”，“ cornerstone-math”：“ ^ 0.1.8”，“ cornerstone-tools”：“ ^ 4.8.0”，“ cornerstone-wado-image-loader”：“ ^ 2.2.4”，“ cornerstone-web-image-loader”：“ ^ 2.1.1”，“ dicom-parser”：“ ^ 1.8.3”，“ file-system”：“ ^ 2.2.2”，“ hammerjs”：“ ^ 2.0.8”，“ pako”：“ ^ 1.0.10”，

[我尝试使用Cornerstone-web-image-loader加载jpg / png图像，效果很好，但是当我更改为wado图像加载器时，无法获得所需的结果。

Answer 1

我做了以下两项更改以使其对我有用：1.配置变量更改，我错过了添加codecsPath和webWorkerPaths

var config = {
    webWorkerPath: '/assets/cornerstone/webworkers/cornerstoneWADOImageLoaderWebWorker.js',
    taskConfiguration: {
        'decodeTask': {
            codecsPath: '/assets/cornerstone/codecs/cornerstoneWADOImageLoaderCodecs.js'
        }
    }
}

2.将加载程序从“ dicomfile”更改为“ wadouri”

cornerstone.loadAndCacheImage("wadouri:" + DCMPath).then(imageData => {
      console.log(imageData);
      cornerstone.displayImage(element, imageData);
    }).catch( error => { console.error(error) });