使用CornerstoneJS加载DICOM文件图像（2D）（持续更新）

首先，确定一个容器用来作为视口显示。

<div class="instance-view"></div>

引入需要用到的JS库。

import * as cornerstone from "cornerstone-core";
import * as cornerstoneTools from "cornerstone-tools";
import * as cornerstoneMath from "cornerstone-math";
import * as cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
import * as dicomParser from 'dicom-parser';
import * as Hammer from 'hammerjs';
import * as cornerstoneWebImageLoader from 'cornerstone-web-image-loader';

一、基础使用

1、注册loader库上需要的依赖。

cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;

2、选择渲染的加载器。

cornerstone.registerImageLoader('http', cornerstoneWADOImageLoader.wadouri.loadImage);
cornerstone.registerImageLoader('https', cornerstoneWADOImageLoader.wadouri.loadImage);

3、获取容器并显示出来。

const instanceViews = document.getElementsByClassName('instance-view');
if(instanceViews!=undefined && instanceViews!=null && instanceViews.length>0){
    cornerstone.enable(instanceViews[0]);//激活视口，必须激活，否则会报错“element not enabled”
    cornerstone.addEnabledElement(instanceViews[0]);//为启用的元素添加内部数据结构

    var DICOM = '';//此处为DICOM的URL地址，用来作为imageId的参数
    const imageId = DICOM;
    cornerstone.loadImage(imageId).then(function (image) {
        cornerstone.displayImage(instanceViews[i], image); // 执行此处才会显示图像
        // console.log(image.imageId);//获取当前显示图片的imageId
        // console.log(image.data);//获取当前显示图片的数据内容
    }).catch(function(error){
        console.log(error);
    });
}