コンテキスト上の複数drawimage（）によってメモリリークが発生する

Question

Imageオブジェクトの配列からキャンバスに複数のdrawImage()を実行しています。 Firefoxでは、数十回の異なるdrawImage呼び出しの後、膨大なメモリリークが発生します。プロセスには1〜2GBのRAMが必要です。

キャンバスや画像の大きさは、およそ

1080x608は基本的に、私のコードは次のようになります：私は間隔をクリアすると、メモリの消費量が数分後に正常に戻って行く

var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 

var images = [...]; // Array of loaded image (new Image()) 
var currentImage = 0; 


var interval = setInterval(function() { 

    context.drawImage(images[currentImage]); 
    currentImage++; 

}, 50); 

。 DOMから<canvas>を削除すると、メモリ消費量は同じままです。

ChromeやSafariの動作が違うため、Firefoxでガベージコレクタが動作する方法が疑わしいのですが、キャンバスキャッシュメモリなどをクリアする方法はありますか？ここで

は、テストハーネスでコードを実行し、いくつかの変更を作ってみましたJSFiddle

Answer 1

です。問題はキャンバスにレンダリングされた結果のイメージに関するものです。あなたはかなり低いイメージファイルのサイズのもので読み込む画像にもかかわらず、得られる画像は、まだ私はキャンバスのサイズを変更すると、このようになり、あなたのdrawImageの呼び出しを修正する場合であっても1280×720 ...

context.drawImage(
    images[currentFrame], 
    0, 0, images[currentFrame].width, images[currentFrame].height, 
    0, 0, canvas.width, canvas.height); 

です。それは同じ1280 x 720のイメージとなり、Firefoxから保存することができます。オリジナルの30K程度ではなく、イメージごとにほぼ1MBを消費します。それに伴い、drawImageが以前に描画されていないイメージで呼び出されるたびにメモリが増加します。

したがって、各画像がFirefoxによってメモリに保持されているとすれば、約370 * 900K（328Mb）になります。他に何が増えているのかは分かりませんが、この問題は主に画像変換の1つです。圧縮されたファイル形式よりもはるかに大きなメモリサイズの1280x720の画像がいくつかFirefoxに保存されているため、メモリの割り当てが大きく飛躍します。

イベントハンドラ内でコンテキストグラブを移動しても、メモリ割り当てに影響はありませんでした。

ここでは、画像をロードしてonloadイベントに基づいて画像を設定する部分を無視します。その結果、一連の画像が乱れる可能性があります。私はちょうど完全にプリロードされていないイメージに関する問題があるかどうかを確認しようとしていました。

  var canvas = document.getElementById('main-canvas'); 
      var canvasProperties = { 
       x: canvas.offsetWidth, 
       y: canvas.offsetHeight 
      }; 

      var images = []; 
      var imagesRange = [0, 369]; 
      for (var i = imagesRange[0]; i <= imagesRange[1]; i++) { 
       var image = new Image(); 
       image.onload = function(event) { 
        images.push(event.target); 
       }; 
       image.src = 'http://frames.teleport.ninja/frames/electrosanne/lowres1080/frame' 
         + parseId(i) + '.jpg'; 
      } 

      var currentFrame = 0; 

      canvas.addEventListener('wheel', function(e) { 
       var context = canvas.getContext('2d'); 
       e.preventDefault(); 
       if (e.deltaY < 0 && currentFrame > imagesRange[0]) { 
        currentFrame--; 
       } else if (e.deltaY > 0 && currentFrame < imagesRange[1]) { 
        currentFrame++; 
       } 

       context.clearRect(0, 0, canvas.width, canvas.height); 
       context.drawImage(
        images[currentFrame], 
        0, 0, images[currentFrame].width, images[currentFrame].height, 
        0, 0, canvas.width, canvas.height); 
      });