Closed kulverstukas1 closed 3 years ago
Welp, I found an open issue about the same problem here: #76 And the complete solution that works for me would be this:
function waitForImagesLoaded(imageURLs, callback){
var imageElements = [];
var remaining = imageURLs.length;
var onEachImageLoad = function(){
if (--remaining === 0 && callback) {
callback(imageElements);
}
};
for (var i = 0, len = imageURLs.length; i < len; i++){
var img = new Image();
img.onload = onEachImageLoad;
img.src = imageURLs[i];
imageElements.push(img);
}
}
function createImgArr() {
images = [];
for (i = 1; i < 73; i++) {
url = "/sukeklio-interfeisas/img/Export_small/p"+(i.toString().padStart(3, "0"))+".jpg";
images.push(url);
}
return images;
}
and then in createGif()
:
waitForImagesLoaded(createImgArr(), function(images) {
for (var i = 0; i < 10; i++) {
gif.addFrame(images[i], {delay: 40});
}
gif.render();
});
Hello,
I was trying out this library and noticed a strange thing happening: I load the page, press a button to render, the GIF is rendered and displayed on the same page. But the GIF that I get has first two images replaced with a black canvas. The interesting part is that if I press the button again, the GIF is rendered properly. If I refresh the page and do it again first time - same thing with black frames.
Here's my test code: