1

不要になったキャンバスとその画像データを解放する方法があるかどうか疑問に思いました。

私がしていることの例をここに示します：

img = new Image();
img.src = "test.png";
img.onload = function() {
  var c = document.createElement('canvas'), d, img = this;
  if( c.getContext) {
    c.width = img.width;
    c.height = img.height;
    c = c.getContext("2d");
    c.drawImage(img,0,0);
    d = c.getImageData(0,0,img.width,img.height);
    img.getPixel = function(x,y) {
      return d.slice((y*img.width+x)*4,4);
    };
  }
  else {
    // canvas not supported, fall back
    img.getPixel = function(x,y) {return [0,0,0,0];}
  }
};

結果が得られたら、メモリを解放するために現在ロードされているキャンバスとimageDataを削除したいと思います。一時的なキャンバスを削除する簡単な方法はありますか？

4

1 に答える 1

2

アップデート

ですから、これは私自身の個人的なプロジェクトのためにもっと徹底的に調査する必要があったものなので、私はいくつかのテストを行いました。

（少なくともChromeでは）キャンバスを作成してデータURLを取得しているだけで、実際にはImage要素に設定していない場合は、問題なくガベージコレクションが行われるようです。これは、例がそれ自体でガベージコレクションを行う必要があることを意味します。

これは、データURLを取得し、それが洋ナシの形になったときにImage要素に割り当てるときです（ほとんどの場合、ブラウザーが画像を処理する方法が原因です）。

そのキャンバスへのすべての参照がなくなると、自然にガベージコレクションが行われます。したがって、閉じないスコープでそれを参照する変数がないことを確認してください。

あなたがしていることで、キャンバスが消えるはずです。

...または少なくともそれが機能するはずです。

実際には、ほとんどのブラウザはページ全体がアンロードされるまでこれらをメモリから解放しないようですが、これは問題があります（少なくとも、FirefoxとChromeの両方でこの問題を追跡している人はかなり多いようです）。

それまでの間、これに対処する最も適切な方法は、キャンバスをグローバルにすることです（または、もっと良いのは、ある種の素敵なマネージャーにそれを収納することです）。そうすれば、同じキャンバスを何度も再利用できます。理想的ではありませんが、メモリをあまり使用しないので、少なくともうまくいくでしょう。

于 2012-12-13T02:34:59.720 に答える