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

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

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

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

我还尝试重复使用相同的画布在每次迭代时显示图像，但是使用的内存量没有改变，就像导入的图像没有删除现有的那样......

Answer 1

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

删除Canvas时释放ImageData

1 个答案: