Problems Creating GIFs with gif.js Library

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.”