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

Question

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

“TypeError：无法在“FileReader”上执行“readAsArrayBuffer”：参数 1 不是“Blob”类型。
在 _global.(匿名函数).(匿名函数) [as readAsArrayBuffer] (http://localhost:4200/polyfills.js:4589:60)
在http://localhost:4200/vendor.js:138552:35977
在新的 ZoneAwarePromise (http://localhost:4200/polyfills.js:4111:29)
在即 (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 具有以下版本的依赖项：

“基石核心”：“^2.3.0”，
“基石数学”：“^0.1.8”，
"基石工具": "^4.8.0",
"cornerstone-wado-image-loader": "^2.2.4",
"cornerstone-web-image-loader": "^2.1.1",
"dicom-parser": "^1.8.3",
"文件系统": "^2.2.2",
"hammerjs": "^2.0.8",
"pako": "^1.0.10",

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

Answer 1

我进行了以下两项更改以使其适合我：

1. config变量更改，我错过了添加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) });