0

HTML Canvas を使用してビットマップ画像を表示する XUL アプリケーションを作成しています。ImageData を生成し、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 に答える