I’m experiencing problems creating a GIF using gif.js with images generated from html2canvas. I have a list of divs that I convert into images and store in an array. However, when I try to create the GIF from these images, the GIF is not exported or displayed correctly.

Here’s a simplified version of my code:

function createGifFromList() {
    // make sure listaImagenes is defined and filled with PNG data
    if (!Array.isArray(listaImagenes) || listaImagenes.length === 0) {
        document.getElementById('reporte2').innerText = 'the image list is empty';
        return;
    }

    // create a new GIF using gif.js
    const gif = new GIF({
        workers: 2,
        quality: 10
    });

    // load and add each image to the GIF
    listaImagenes.forEach((imgDataUrl) => {
        const img = new Image();
        img.src = imgDataUrl;
        img.onload = () => {
            gif.addFrame(img, { delay: 500 }); // add each image with a delay of 500ms
        };
    });

    // when all images have been added
    gif.on('finished', function(blob) {
        // create a download link for the GIF
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'myAnimatedGif.gif';
        a.click();
        // display the gif in the frames container
        const framesContainer = document.getElementById('framesContainer');
        const imgElement = document.createElement('img');
        imgElement.src = url;
        framesContainer.innerHTML = ''; // clear the container
        framesContainer.appendChild(imgElement);
    });

    // render the GIF
    gif.render();
}

“I would like to be able to export the GIF or display it in framesContainer.”