Uncaught Error: Invalid image

[LeahAstrakhan]

Hi everyone ! I try to use gij.s but each time i have the same error message " Uncaught Error: Invalid image at GIF.addFrame" It's at the line :
mygif.addFrame('https://epic.gsfc.nasa.gov/archive/natural/2019/02/18/png/epic_1b_20190218020554.png');

Thank you

[1j01]

addFrame accepts Image objects (and canvases or canvas contexts), not URLs as strings.

Here's an example of loading images:

// function to retrieve an image
function loadImage(url) {
  return new Promise((fulfill, reject) => {
    let image = new Image();
    image.onload = () => fulfill(image);
    image.onerror = (error) => reject(error);
    image.src = url;
  });
}

// get images
Promise.all([
  loadImage("https://upload.wikimedia.org/wikipedia/commons/3/3e/Icon_Arrow_Left_256x256.png"),
  loadImage("https://upload.wikimedia.org/wikipedia/commons/d/d2/Icon_Arrow_Up_256x256.png"),
  loadImage("https://upload.wikimedia.org/wikipedia/commons/f/f6/Icon_Arrow_Right_256x256.png"),
  loadImage("https://upload.wikimedia.org/wikipedia/commons/0/0b/Icon_Arrow_Down_256x256.png")
])
.then((images) => {

  var gif = new GIF({
    workers: 2,
    quality: 10
  });

  // add frames for each image
  images.forEach((image) => {
    gif.addFrame(image);
  });

  gif.on('finished', (blob)=> {
    // do something with the generated gif file
    var blobUrl = URL.createObjectURL(blob);
    // like (try to) open it in a new tab (it might get popup-blocked):
    window.open(blobUrl);
    // or show it in an img on the page:
    document.getElementById("gif-result-img").src = blobUrl;
  });

  gif.render();

}, (error) => {
  alert("Failed to load image\n\n" + error.message);
})
.catch((error) => {
  alert("Failed to create animated GIF\n\n" + error.message);
});