How ensure 1:1 pixels in original and rendered image in Cornerstone3D

Support
1

I want to use cornerstone to render a 2D image into a canvas so that there is a 1:1 match between pixels in the original DICOM and the pixels in the rendered image.
It looks like the ‘SCALE’ type of displayArea used in viewport.setDisplayArea might be the right approach. Is this correct?

At the moment when I try

        renderingEngine.getViewport("ID").setDisplayArea({
            type: 'SCALE',
            scale: 1.0,
            imageCanvasPoint: {
                imagePoint: [0.5, 0.5],
                canvasPoint: [0.5, 0.5]
            },
            storeAsInitialCamera: true
        });

I get “TypeError: Cannot read properties of undefined (reading ‘getSpacing’) at ga.setDisplayAreaScale …”

See Test Cornerstone using SCALE displayArea - JSFiddle - Code Playground

Or index.html I use directly in browser:

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="shortcut icon" href="data:," /> <!-- avoid favicon request -->
</head>

<body style="margin:0px; overflow:hidden">
    <noscript>You need to enable JavaScript to run this app.</noscript>

    <div style="width:522px; height:522px; background: #88AA88;">
        <div id="mount-point" style="display: grid; width:256px; height:256px; position:relative; top:5px; left:5px;">
        </div>
    </div>

</body>

<script
    src="https://cdn.jsdelivr.net/npm/@cornerstonejs/dicom-image-loader@1.84.4/dist/cornerstoneDICOMImageLoader.bundle.min.js"></script>
<script src="
    https://cdn.jsdelivr.net/npm/dicom-parser@1.8.21/dist/dicomParser.min.js"></script>

<script type="module">
    import * as cornerstone from 'https://esm.run/@cornerstonejs/core';

    cornerstoneDICOMImageLoader.external.cornerstone = cornerstone;
    cornerstoneDICOMImageLoader.external.dicomParser = dicomParser;

    var config = {
        maxWebWorkers: navigator.hardwareConcurrency || 1,
        startWebWorkersOnDemand: true,
        taskConfiguration: {
            'decodeTask': {
                initializeCodecsOnStartup: false,
                usePDFJS: false
            }
        }
    };
    cornerstoneDICOMImageLoader.webWorkerManager.initialize(config);

    const imageTestPattern = "wadouri:https://raw.githubusercontent.com/cornerstonejs/cornerstone3D/main/packages/dicomImageLoader/testImages/TestPattern_JPEG-Baseline_YBR422.dcm";

    let renderingEngine;
    cornerstone.init().then(() => {
        renderingEngine = new cornerstone.RenderingEngine();
        renderingEngine.enableElement({
            viewportId: "ID",
            type: cornerstone.Enums.ViewportType.STACK,
            element: document.getElementById("mount-point"),
            defaultOptions: {},
        });

        // The following fails - although it looks same as config set in
        // https://github.com/cornerstonejs/cornerstone3D/blob/c1aac28a21231af731e8e3ea014a99f012c44931/packages/tools/examples/resize/index.ts
        // (Comment it out we get a render from cornerstone)
        renderingEngine.getViewport("ID").setDisplayArea({
            type: 'SCALE',
            scale: 1.0,
            imageCanvasPoint: {
                imagePoint: [0.5, 0.5],
                canvasPoint: [0.5, 0.5]
            },
            storeAsInitialCamera: true
        });

    }).then(() => {
        const viewport = renderingEngine.getViewport("ID");
        viewport.setStack([imageTestPattern]);
    });
</script>

</html>
2

can you try the latest cornerstone3D 2.0 and if does not work, create an issue for us?

Can you check the latest OHIF viewer, which now includes Cornerstone 3D 2.0?

Here are the migration guides:

Try OHIF locally: OHIF Viewer
Try Cornerstone3D 2.0 locally: https://www.cornerstonejs.org/live-examples/local.html

3

Actually seems to work OK if I delay calling setDisplayArea - presumably because data isn’t loaded yet otherwise? (Since getDefaultImageData() returned undefined I think)
So this updated fiddle works:

Note that data columns is 640 pixels. I set viewport element to width 320px (=640px on my monitor with 200% display scaling). Then the image is scaled to fit.

1 Like