black background for transparent images and duplicate layers

[ranbuch]

Here are some of the input images: frame # 1: frame # 10: frame # 44:

(out of 49 total images)

And this is the end result:

As you can see the background is black and the images seems to be duplicating i instead of flushing after their frame.

I use those options: { "images": [49 base64 images], "gifWidth": "200", "gifHeight": "200", "sampleInterval": 80 }

[forget1]

same problem.Have you solved this problem?

[kabrice]

Same problem. Any solution ???

[kennyalmendral]

It's my first time using this library and I encountered the same problem... Anyways, here's the solution that worked for me.

I have an array called images that contains four base64 image URIs and each of them has transparent areas.

Now I have a function that adds a background color to an image like so:

function addBackgroundColor(imageURI, backgroundColor) {
    var image = new Image();
    image.src = imageURI;

    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
    
    canvas.width = 449;
    canvas.height = 449;
   
    // Add background color
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.drawImage(image, 0, 0);

    return canvas.toDataURL();
}

Sample Usage

var images = [...]; // Contains 4 base64 image URIs
    backgroundColor = '#222222';

gifshot.createGIF({
    gifWidth: 449,
    gifHeight: 449,
    images: [
        addBackgroundColor(images[0], backgroundColor),
	addBackgroundColor(images[1], backgroundColor),
	addBackgroundColor(images[2], backgroundColor),
	addBackgroundColor(images[3], backgroundColor)
    ],
    interval: 1,
    numFrames: 10,
    frameDuration: 1,
    sampleInterval: 10,
    numWorkers: 2
}, function(obj) {
    if (!obj.error) {
        console.log(obj.image);
    }
});

Hope this helps :)

[dorofino]

This does not work, any idea how to make the background transparent?

[leogitpro]

Anybody have a solution for the bug?