0

我正在编写一个使用 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”循环时，我希望释放为 Canvas 分配的内存，但是通过执行代码而不执行 putImageData，我注意到我的程序最后使用的内存减少了 100Mb（我的图像非常大）。

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

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

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

我还尝试在每次迭代时重用相同的画布来显示图像，但使用的内存量没有改变，就好像在不删除现有图像的情况下导入的图像......

4

1 回答 1

0

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

于 2011-01-18T14:10:37.547 回答