Question

0

55

Views

Javascript Gif generation piling up blobs in browser memory

I'm using this library to generate gifs (https://github.com/jnordberg/gif.js). When it generates a gif file into blob, it does so in the browser memory and does not clean it afterwards, piling up files so that in continued use without a refresh, the page simply crashes.

You may replicate it by accessing its own demo here: (http://jnordberg.github.io/gif.js/). When you open up the network or sources tab, you'll see a few blobs loaded there, once you go to the page and regenerate any example image by changing its properties (like quality etc), it will generate new blobs without clearing the old ones.

For me it's a big problem because I'm generating hundreds of heavy animated gifs and the page crashes, so I need to find a way to remove these blobs from memory. Ideally I want to be able to do this without changing the gif.js library, maybe if I can access these blobs by reference somehow?

Any ideas?

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-10T07:06:19.630Z

The example is forgetting to release the blob URL that was created once you no longer need it.

Note that the lib doesn't create the blob URL, so the caller of the lib is responsible for creating and releasing the blob by calling URL.createObjectURL() and URL.revokeObjectUrl()

let lastBlobUrl;

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

// add a image element
gif.addFrame(imageElement);

// or a canvas element
gif.addFrame(canvasElement, {delay: 200});

// or copy the pixels from a canvas context
gif.addFrame(ctx, {copy: true});


gif.on('finished', function(blob) {
  // You have to call this when you no longer need that URL.
  if (lastBlobUrl) {
     URL.revokeObjectURL(lastBlobUrl)
  }
  lastBlobUrl = window.open(URL.createObjectURL(blob));
});

gif.render();