Background image shown in canvas but not in image output

[akjoshi]

Hi,

I can easily add background image to the canvas but am not able to get it in the image output. Is there anything I need to look at?

I added background image using 'drawImage'.

[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);