Javascript Gif生成在浏览器内存中堆积blobs

Question

我正在使用这个库来生成gif (https://github.com/jnordberg/gif.js)。当它在blob中生成一个gif文件时，它会在浏览器内存中这样做，并且不会在之后清理它，而是堆积文件，以便在不刷新的情况下继续使用时，页面会简单地崩溃。

你可以通过访问它自己的演示来复制它：(http://jnordberg.github.io/gif.js/)。当您打开网络或源选项卡时，您将看到加载了一些斑点，一旦您转到页面并通过更改其属性(如质量等)重新生成任何示例图像，它将生成新的斑点，而不会清除旧的斑点。

对我来说，这是一个大问题，因为我正在生成数百个沉重的动画gif，页面崩溃，所以我需要找到一种方法从内存中删除这些blob。理想情况下，我希望能够在不更改gif.js库的情况下做到这一点，也许我可以通过某种方式通过引用访问这些blob？

有什么想法吗？

Answer 1

示例是忘记在不再需要时释放创建的blob URL。

请注意，库并不创建blob URL，因此库的调用者通过调用URL.createObjectURL()和URL.revokeObjectUrl()负责创建和释放blob

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