Background image shown in canvas but not in image output

[akjoshi]

Background image shown in canvas but not in image output

[forresto]

There isn't any reason that this shouldn't work. Can you show some code?

[hodge157]

Hello @forresto I am also getting this problem. It seems like it doesn't like converting images in the canvas into part of the gif. Please take a look at my code and assist if you can, I'd really appreciate that, cheers :)

var canvas = document.getElementById('bitmap');
var context = canvas.getContext('2d');

context.fillStyle = "rgb(255,255,255)";
context.fillRect(0,0,canvas.width, canvas.height); //GIF can't do transparent so do white

var encoder = new GIFEncoder();
encoder.setRepeat(0); //auto-loop
encoder.setDelay(500);
console.log(encoder.start());

context.fillStyle = "rgb(200,0,0)";
context.fillRect (0, 0,canvas.width, canvas.height);

console.log(encoder.addFrame(context));

context.fillStyle = "rgb(20,0,200)";
context.fillRect (0, 0,canvas.width, canvas.height);

console.log(encoder.addFrame(context));

var img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0,canvas.width, canvas.height);
}
img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png";

console.log(encoder.addFrame(context));

encoder.finish();
document.getElementById('image').src = 'data:image/gif;base64,'+encode64(encoder.stream().getData())

[antimatter15]

That's probably a cross origin permissions issue. Try serving up the image from the same domain.

[hodge157]

Hi @antimatter15 , I've updated this so it is from the same domain and still no luck unfortunately. The image shows in the canvas but not in the gif.

[forresto]

In your code img.onload is going to fire after the rest of your code runs. Try:

...
var img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0,canvas.width, canvas.height);
  encoder.addFrame(context);
  encoder.finish();
}
img.src = "280px-PNG_transparency_demonstration_1.png";

[hodge157]

@antimatter15 @forresto I really apprecitate the help, not sure what I'm doing wrong but I'd like to get it so the image becomes part of the animation like the coloured rectangles are. This is the test page my code is on, http://www.anythoughts.net/gifgo/jsgif-master/Demos/test.html

[nathyanemoreno]

I had issues loading images, so I decided to use a Promise to ensure the image was loaded:

async function loadImage(url) {
    let img = new Image();
    await new Promise((r) => (img.onload = r), (img.src = url));
    return img;
  }

  const encode = (img) => {
    encoder.start();
    context.drawImage(img, 0, 0, canvas.width, canvas.height);
    encoder.addFrame(context);
    encoder.finish();
    document.getElementById("image").src =
      "data:image/gif;base64," + encode64(encoder.stream().getData());
  };

  loadImage("280px-PNG_transparency_demonstration_1.png").then(encode);