show all images in a folder into a html page

folder-img-to-html.php

<?php
    $dir = 'img';
    $files = scandir($dir);
    $ext = '.png';
    foreach ($files as $img) {
        if ( substr_compare($img, $ext, -strlen($ext), strlen($ext)) === 0 ) {
            ?>
                <h2 style="font-family: monospace;"><?=$img?></h2>
                <div style="text-align: center; margin-bottom: 100px;">
                    <img src="img/<?=$img?>">
                </div>
            <?
        }
    }
?>

$(document).ready(function() {
let images = [];
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let video = document.getElementById('video');

$("#processButton").click(function() {
    let files = document.getElementById('imageFolder').files;
    for (let i = 0; i < files.length; i++) {
        if (files[i].type.match(/image.*/)) {
            images.push(files[i]);
        }
    }
    images.sort(function(a, b) {
        return a.name.localeCompare(b.name);
    });
    video.width = images[0].width;
    video.height = images[0].height;
    canvas.width = images[0].width;
    canvas.height = images[0].height;
    playImages();
});

$("#resultButton").click(function() {
    // Do something with the processed images and display the result
    alert('Result displayed!');
});

function playImages() {
    let currentImage = 0;
    let fps = 10;
    let interval = setInterval(function() {
        if (currentImage >= images.length) {
            clearInterval(interval);
            $("#processButton").attr("disabled", true);
            $("#resultButton").removeAttr("disabled");
            return;
        }
        let image = new Image();
        image.src = URL.createObjectURL(images[currentImage]);
        image.onload = function() {
            ctx.drawImage(image, 0, 0);
            video.src = canvas.toDataURL('image/png');
            currentImage++;
        };
    }, 1000 / fps);
}

});