Cornerstone3D升级至1.85.0后无法加载压缩DICOM并渲染MPR

• 未压缩DICOM文件可通过Cornerstone3D的Volume模式正常渲染MPR图像，但特定压缩模式的DICOM无法渲染。
• 压缩模式详情：JPEG Extended (Process 2 & 4): Default Transfer Syntax for Lossy JPEG 12 Bit Image Compression (Process 4 only)，传输语法UID：1.2.840.10008.1.2.4.51。
• 版本差异：使用Cornerstone3D 1.23.0版本时该压缩图像可正常渲染，升级至1.85.0版本后无法加载，采用Volume模式进行渲染。

相关代码 #

加载DICOM的核心逻辑 #

async function loadDcm () {
    await initcornerstone();
    try {
        hideLoadingContainer();
        let dcm1_container = document.getElementById('dcm1');
        let dcm2_container = document.getElementById('dcm2');
        let dcm3_container = document.getElementById('dcm3');
        element1 = document.createElement('div');
        element2 = document.createElement('div');
        element3 = document.createElement('div');
        element1.style.width = elemet1Style.width;
        element1.style.height = elemet1Style.height;
        element2.style.width = elemet2Style.width;
        element2.style.height = elemet2Style.height;
        element3.style.width = elemet3Style.width;
        element3.style.height = elemet3Style.height;
        element1.oncontextmenu = (e) => e.preventDefault();
        element2.oncontextmenu = (e) => e.preventDefault();
        element3.oncontextmenu = (e) => e.preventDefault();
        dcm1_container.appendChild(element1);
        dcm2_container.appendChild(element2);
        dcm3_container.appendChild(element3);
        renderingEngine = new RenderingEngine(renderingEngineId);
        volume = await volumeLoader.createAndCacheVolume(volumeId, {
            imageIds: imageIds.value,
        });
       
        const viewportInputArray = [
            {
                viewportId: viewportId1.value,
                element: element1,
                type: ViewportType.ORTHOGRAPHIC,
                defaultOptions: {
                    orientation: viewport_orientation[0],
                },
            },
            {
                viewportId: viewportId2.value,
                element: element2,
                type: ViewportType.ORTHOGRAPHIC,
                defaultOptions: {
                    orientation: viewport_orientation[1],
                },
            },
            {
                viewportId: viewportId3.value,
                element: element3,
                type: ViewportType.ORTHOGRAPHIC,
                defaultOptions: {
                    orientation: viewport_orientation[2],
                },
            },
        ];
        renderingEngine.setViewports(viewportInputArray);
        let viewport1 = renderingEngine.getVolumeViewports()[0];
        await volume.load();
        await setVolumesForViewports(
            renderingEngine,
            [{ volumeId }],
            viewportIds
        )
        renderingEngine.renderViewports(viewportIds);
    } catch (error) {
        hideLoadingContainer();
        console.error(error);
        cancelLoading();
    }
}

Cornerstone DICOM Image Loader初始化代码 #

import dicomParser from 'dicom-parser';
import * as cornerstone from '@cornerstonejs/core';
import * as cornerstoneTools from '@cornerstonejs/tools';
import cornerstoneDICOMImageLoader from '@cornerstonejs/dicom-image-loader';
window.cornerstone = cornerstone;
window.cornerstone3DTools = cornerstoneTools;
const { preferSizeOverAccuracy, useNorm16Texture } = cornerstone.getConfiguration().rendering;
export default function initCornerstoneDICOMImageLoader() {
  cornerstoneDICOMImageLoader.external.cornerstone = cornerstone;
  cornerstoneDICOMImageLoader.external.dicomParser = dicomParser;
  cornerstoneDICOMImageLoader.configure({
    useWebWorkers: true,
    decodeConfig: {
      convertFloatPixelDataToInt: false,
      use16BitDataType: preferSizeOverAccuracy || useNorm16Texture,
    },
  });
  let maxWebWorkers = 1;
  if (navigator.hardwareConcurrency) {
    maxWebWorkers = Math.min(navigator.hardwareConcurrency, 7);
  }
  var config = {
    maxWebWorkers,
    startWebWorkersOnDemand: false,
    taskConfiguration: {
      decodeTask: {
        initializeCodecsOnStartup: false, 
        strict: false, 
      },
    },
  };
  cornerstoneDICOMImageLoader.webWorkerManager.initialize(config);
}

可能原因及调整方向 #

1. 编解码器初始化不及时
   新版本可能对编解码器加载逻辑做了修改，当前代码中initializeCodecsOnStartup: false会延迟编解码器初始化，导致解码12bit JPEG时缺少必要组件。建议改为true，确保启动时完成编解码器加载。

2. 16位数据类型适配问题
   JPEG 12bit解码后的数据需要匹配纹理数据类型设置。当前use16BitDataType依赖全局配置，可能在新版本中默认值变化导致不兼容。可以强制设置use16BitDataType: true，确保数据类型适配。

3. Web Worker配置冲突
   新版本对Worker的调度逻辑可能有更新，startWebWorkersOnDemand: false可能导致Worker未及时启动处理解码任务。改为true按需启动Worker，或调整Worker数量，提升解码效率。

4. 版本依赖变更
   大版本升级可能移除了旧的JPEG解码依赖，建议检查@cornerstonejs/dicom-image-loader和dicom-parser的版本是否与1.85.0兼容，必要时更新依赖包。

调整后的初始化代码示例 #

export default function initCornerstoneDICOMImageLoader() {
  cornerstoneDICOMImageLoader.external.cornerstone = cornerstone;
  cornerstoneDICOMImageLoader.external.dicomParser = dicomParser;
  cornerstoneDICOMImageLoader.configure({
    useWebWorkers: true,
    decodeConfig: {
      convertFloatPixelDataToInt: false,
      use16BitDataType: true, // 强制适配12bit JPEG的16位数据类型
    },
  });
  let maxWebWorkers = 1;
  if (navigator.hardwareConcurrency) {
    maxWebWorkers = Math.min(navigator.hardwareConcurrency, 7);
  }
  var config = {
    maxWebWorkers,
    startWebWorkersOnDemand: true, // 按需启动Worker避免资源浪费
    taskConfiguration: {
      decodeTask: {
        initializeCodecsOnStartup: true, // 启动时初始化所有编解码器
        strict: false, 
      },
    },
  };
  cornerstoneDICOMImageLoader.webWorkerManager.initialize(config);
}

内容的提问来源于stack exchange，提问作者genggeng