Javascript 从内存中删除图像对象

以下代码每100毫秒触发一次：

  videoDecoder.onmessage = function (e) {
    let blob = e.data;
    let blobURL = URL.createObjectURL(blob);
    const img = new Image();
    img.onload = function() {
      dCtx.drawImage(img, 0, 0);
    };
    img.src = blobURL;
  };

代码按预期工作，问题是大约30分钟到1小时或运行时后，浏览器开始无响应，最终崩溃。其想法是，该代码预计将运行8小时以上，甚至24/7；最好的方法是什么，这样它就不会随着时间的推移消耗太多内存？（这就是我所观察到的。）

如果您未能做到这一点，浏览器必须保持Blob的活动状态，并且无法释放它使用的内存，因为它无法知道您对指向它的字符串做了什么

videoDecoder.onmessage = function (e) {
  const blob = e.data;
  const blobURL = URL.createObjectURL(blob);
  const img = new Image();
  img.onload = function() {
    dCtx.drawImage(img, 0, 0);
    URL.revokeObjectURL(blobURL);
  };
  img.src = blobURL;
};

您甚至可以更好地使用浏览器，而不是使用API进行操作，它提供了一种方法，允许将其数据标记为可撤销的，因为浏览器通常喜欢缓存图像数据

videoDecoder.onmessage = async function (e) {
  const blob = e.data;
  const bmp = await createImageBitmap( blob );
  dCtx.drawImage(bmp 0, 0);
  bmp.close();
};

---

您总是想要一个图像对象，为什么不创建它并将onload处理程序设置在声明dCtx的同一位置？从该函数中删除了4行代码，然后你只需要依赖GC来获得像素缓冲区。这只适用于Firefox？在Chrome上运行时，它抛出：

Uncaught（承诺中）domeException:源图像无法解码。

你的Blob中有什么？我运行了8个小时，应用程序没有崩溃，两者都正常工作。除了我必须检查浏览器是Chrome还是Firefox，因为'const bmp=wait createImageBitmap（blob）；`在Firefox中不起作用，但在Chrome上起作用。如果是Chrome，则必须处理数据URL，然后删除URL。这应该在FF和Chrome中都可以使用，或者两者都不能使用。。。这是什么样的形象？它来自哪里？