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

Question

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

"TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.
at _global.(anonymous function).(anonymous function) [as readAsArrayBuffer] (http://localhost:4200/polyfills.js:4589:60)
at http://localhost:4200/vendor.js:138552:35977
at new ZoneAwarePromise (http://localhost:4200/polyfills.js:4111:29)
at Ie (http://localhost:4200/vendor.js:138552:35867)
at Object.load (http://localhost:4200/vendor.js:138552:31691)
at Ae (http://localhost:4200/vendor.js:138552:37680)
at loadImageFromImageLoader (http://localhost:4200/vendor.js:96174:25)
at Object.loadAndCacheImage (http://localhost:4200/vendor.js:96237:21)
at ViewImageComponent.ngAfterViewInit (http://localhost:4200/main.js:777:65)
at 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) });

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

How to load dicom file in angular 7 project using cornerstone

javascript

dicom

angular