I have this page to load the dcm files contained in a folder and try to obtain thumbnail pictures on the left and full images on the right once the small images are clicked… unfortunately, all thumbnails are blank and I cannot understand the reason!!!

<style>
    body {
        display: flex;
    }
    #previewArea {
        width: 20%;
        height: 100vh;
        overflow-y: scroll;
        border-right: 1px solid #ccc;
        padding: 10px;
    }
    #viewerArea {
        width: 80%;
        height: 100vh;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .preview {
        width: 100%;
        cursor: pointer;
        margin-bottom: 10px;
        border: solid 2px black;
        
    }
    .preview img {
        width: 100%;
    }
    #dicomImage {
        width: 100%;
        height: 80%;
        background-color: black;
    }
</style>
<div id="previewArea">
    <!-- Thumbnails will be appended here -->
</div>
<div id="viewerArea">
    <div id="dicomImage"></div>
    <button id="generatePdf">Generate PDF</button>
</div>
<!-- Include required Cornerstone libraries -->
<script src="https://unpkg.com/[email protected]/hammer.js"></script>
<script src="https://unpkg.com/[email protected]/dist/dicomParser.min.js"></script>
<script src="https://unpkg.com/cornerstone-core"></script>
<script src="https://unpkg.com/cornerstone-math"></script>
<script src="https://unpkg.com/cornerstone-wado-image-loader"></script>
<script src="https://unpkg.com/cornerstone-tools"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", async function() {
        const previewArea = document.getElementById('previewArea');
        const viewerArea = document.getElementById('dicomImage');
        cornerstone.enable(viewerArea);

        // Configure cornerstoneWADOImageLoader
        cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
        cornerstoneWADOImageLoader.configure({
            beforeSend: function(xhr) {
                // eventually
            },
            useWebWorkers: true
        });

        try {
            // Fetch the list of DICOM files
            const response = await fetch('scan_directory.php');
            const dicomFiles = await response.json();
            console.log(dicomFiles);

            for (const file of dicomFiles) {

                const thumbnailContainer = document.createElement('div');
                thumbnailContainer.className = 'preview';
                thumbnailContainer.innerHTML = `
                    <input type="checkbox" data-file="${file}">
                    <canvas width="100" height="100"></canvas>
                `;
                previewArea.appendChild(thumbnailContainer);

                const thumbnailElement = thumbnailContainer.querySelector('canvas');
                cornerstone.enable(thumbnailElement);

                const image = await cornerstone.loadAndCacheImage(`wadouri:${file}`);
                console.log(image);
                cornerstone.displayImage(thumbnailElement, image);
                thumbnailElement.addEventListener('click', () => {
                    cornerstone.displayImage(viewerArea, image);
                });
            }

            document.getElementById('generatePdf').addEventListener('click', async function() {
                const selectedFiles = Array.from(document.querySelectorAll('#previewArea input[type="checkbox"]:checked')).map(checkbox => checkbox.getAttribute('data-file'));
                const { jsPDF } = window.jspdf;
                const doc = new jsPDF();

                for (const file of selectedFiles) {
                    const image = cornerstone.metaData.get('instance', file);
                    console.log('IMAGE:', image)
                    if (!image) {
                        console.error('Selected image not found:', file);
                        continue; // Skip generating PDF for missing images
                    }

                    const canvas = document.createElement('canvas');
                    canvas.width = image.columns;
                    canvas.height = image.rows;
                    const context = canvas.getContext('2d');
                    cornerstone.renderToCanvas(image, context, { invert: false });

                    const imgData = canvas.toDataURL('image/jpeg');
                    doc.addImage(imgData, 'JPEG', 0, 0);
                    doc.addPage();
                }

                doc.save('dicom_images.pdf');
            });
        } catch (error) {
            console.error('Error loading DICOM files:', error);
        }
    });
</script>

Here is the PHP page to load the dcm file:

PHP

header('Content-Type: application/json');
// Directory to scan
$directory = 'dicomfiles/';
// Get all .dcm files from the directory
$files = glob($directory . '*.dcm');
// Return the file list as JSON
echo json_encode($files);

You can see some attempts to create a PDF but also that part of the code is not working properly…

Moreover, I would like to display the cornerstone tools on the full images but again I am not able to do that…

Thanks