使用CornerstoneJS加载DICOM文件图像（3.X版本）（持续更新）

一、引用

使用NPM下载包

npm install @cornerstonejs/core
npm install @cornerstonejs/tools
npm install @cornerstonejs/dicom-image-loader
npm install @cornerstonejs/nifti-volume-loader

二、使用

引入关键包

import {
  init as coreInit,
  RenderingEngine,
  Enums,
  volumeLoader,
  setVolumesForViewports,
} from "@cornerstonejs/core";
import { init as dicomImageLoaderInit } from "@cornerstonejs/dicom-image-loader";
import { createImageIdsAndCacheMetaData } from "../../../../utils/demo/helpers";

以下案例引用自官方文档，可直接查看官方文档：官方文档案例

import {
  init as coreInit,
  RenderingEngine,
  Enums,
  volumeLoader,
  setVolumesForViewports,
} from '@cornerstonejs/core';
import { init as dicomImageLoaderInit } from '@cornerstonejs/dicom-image-loader';
import { createImageIdsAndCacheMetaData } from '../../../../utils/demo/helpers';

const { ViewportType } = Enums;

const content = document.getElementById('content');

const viewportGrid = document.createElement('div');
viewportGrid.style.display = 'flex';
viewportGrid.style.flexDirection = 'row';

// element for axial view
const element1 = document.createElement('div');
element1.style.width = '500px';
element1.style.height = '500px';

// element for sagittal view
const element2 = document.createElement('div');
element2.style.width = '500px';
element2.style.height = '500px';

viewportGrid.appendChild(element1);
viewportGrid.appendChild(element2);

content.appendChild(viewportGrid);
// ============================= //

async function run() {
  await coreInit();
  await dicomImageLoaderInit();

  // Get Cornerstone imageIds and fetch metadata into RAM
  const imageIds = await createImageIdsAndCacheMetaData({
    StudyInstanceUID:
      '1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463',
    SeriesInstanceUID:
      '1.3.6.1.4.1.14519.5.2.1.7009.2403.226151125820845824875394858561',
    wadoRsRoot: 'https://d14fa38qiwhyfd.cloudfront.net/dicomweb',
  });

  // Instantiate a rendering engine
  const renderingEngineId = 'myRenderingEngine';
  const renderingEngine = new RenderingEngine(renderingEngineId);

  const volumeId = 'myVolume';

  // Define a volume in memory
  const volume = await volumeLoader.createAndCacheVolume(volumeId, {
    imageIds,
  });

  const viewportId1 = 'CT_AXIAL';
  const viewportId2 = 'CT_SAGITTAL';

  const viewportInput = [
    {
      viewportId: viewportId1,
      element: element1,
      type: ViewportType.ORTHOGRAPHIC,
      defaultOptions: {
        orientation: Enums.OrientationAxis.AXIAL,
      },
    },
    {
      viewportId: viewportId2,
      element: element2,
      type: ViewportType.ORTHOGRAPHIC,
      defaultOptions: {
        orientation: Enums.OrientationAxis.SAGITTAL,
      },
    },
  ];

  renderingEngine.setViewports(viewportInput);

  volume.load();

  setVolumesForViewports(
    renderingEngine,
    [{ volumeId }],
    [viewportId1, viewportId2]
  );
}

run();

三、解决报错

1、Static class blocks are not enabled. Please add `@babel/plugin-transform-class-static-block` to your configuration.

解决方法：

①下载插件

npm install --save-dev @babel/plugin-transform-class-static-block

②配置文件

 Babel 配置文件中添加这个插件。Babel 的配置文件可以是 .babelrc、babel.config.json、babel.config.js 或在 package.json 中的 babel 字段。

对于 .babelrc 文件：

{
  "plugins": ["@babel/plugin-transform-class-static-block"]
}

对于 babel.config.json 文件：

{
  "plugins": ["@babel/plugin-transform-class-static-block"]
}

对于 babel.config.js 文件：

module.exports = {
  plugins: ["@babel/plugin-transform-class-static-block"],
};

对于 package.json 中的配置：

{
  "babel": {
    "plugins": ["@babel/plugin-transform-class-static-block"]
  }
}

2、Module not found: Error: Can't resolve 'fs' in 'E:\xxx\xxx\node_modules\@cornerstonejs\codec-charls\dist'

解决方法：

①下载安装包：

npm install @cornerstonejs/codec-charls
npm install node-polyfill-webpack-plugin --save-dev

②修改配置文件：

Vue项目的特殊配置‌：

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports = {
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()]
  }
}

这种方法适用于Vue CLI创建的项目。

处理process未定义问题‌：

如果出现process is not defined错误，需要额外配置：

plugins: [
  new webpack.ProvidePlugin({
    process: 'process/browser'
  })
]

并安装process包：

npm install process

‌React项目通过craco配置‌：

在craco.config.js中添加：

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports = {
  webpack: {
    plugins: [new NodePolyfillPlugin()]
  }
}

这种方式适用于使用create-react-app创建的项目。

3、Module not found: Error: Can't resolve '../utils/demo/helpers' in 'E:\xxxx\cornerstone-demo\src\components'

解决方法：

下载官方代码，然后在代码文件夹中找到 cornerstone3D-main\utils\demo，将该文件夹下的helper文件夹整个复制到自己的项目中即可。

4、引用后会出现各种模块缺失，依照缺失提示下载模块即可

npm install dicomweb-client
npm install dcmjs
npm install @cornerstonejs/calculate-suv
npm install @cornerstonejs/streaming-image-volume-loader

若有转换报错，则继续安装：

npm install --save-dev @babel/core @babel/cli @babel/preset-env