删除画布时释放ImageData

Question

我正在使用HTML Canvas编写一个XUL应用程序来显示位图图像。我正在生成ImageDatas并使用putImageData函数将它们导入到画布中：

  for(var pageIndex=0;pageIndex<100;pageIndex++){
   this.img = imageDatas[pageIndex];

   /* Create the Canvas element */
   let imgCanvasTmp = document.createElementNS("http://www.w3.org/1999/xhtml",'html:canvas');
   imgCanvasTmp.setAttribute('width', this.img.width);
   imgCanvasTmp.setAttribute('height', this.img.height);

   /* Import the image into the Canvas */
   imgCanvasTmp.getContext('2d').putImageData(this.img, 0, 0);

   /* Use the Canvas into another part of the program (Commented out for testing) */
  // this.displayCanvas(imgCanvasTmp,pageIndex);
  }

图像被很好地导入了，但由于putImageData函数似乎有一个内存泄漏。

当退出" for“循环时，我希望分配给画布的内存被释放，但是，通过执行代码而不执行putImageData，我注意到我的程序在最后使用的内存少了100Mb (我的图像相当大)。

我得出的结论是，putImageData函数阻止垃圾收集器释放分配的内存。

你知道我该如何强制垃圾收集器释放内存吗？有没有办法清空画布？

我已经尝试使用delete操作符或使用clearRect函数删除画布，但它什么也没做。

我还尝试在每次迭代中重用相同的画布来显示图像，但使用的内存量没有变化，就像导入图像时没有删除现有图像一样……

Answer 1

您可以尝试在循环后清除画布。看一下您的代码，imgCanvasTmp仍然是可访问的，不能被垃圾回收。请注意，您可能需要让浏览器空闲几分钟，然后垃圾收集器才会启动。另外，也许你也想清除imageDatas。