0

大量の画像 (約 5000) を「new Image()」オブジェクトにロードし、canvas.drawImage(image, 0, 0); を呼び出してキャンバスにそれぞれ描画します。

これは IE10 ではまったく問題なく動作しますが、Firefox を使用するとすぐにスタック オーバーフロー エラーが発生します。これは、何らかの理由で Firefox のメモリ使用量が増加し、オーバーフローするまで増加するためです。誰かが理由を知っていますか？キャンバスに描画した後、GCは実際に画像を収集しないと思います。100 個の Image オブジェクトを使用していて、それらを描画する前に Image オブジェクトの src を循環させるだけでも、メモリ使用量がどんどん増えていきます。近いうちに Chrome と Safari をテストしますが、まだ解決策が必要です。誰もが「最高のブラウザー」Firefox を使用しているためです。

編集：

function play() {
    //calculated iLag here
    //calculated wondow.FrameCtr here
    var iFrameRate = Math.round(1000 / 25);
    var oImage = new Image();
    oImage.onload = function () {
        renderImage(this);
    }
    //window.Video is an array of window.URL.createObjectURL(data) (about 500 items)
    oImage.src = window.Video[window.FrameCtr];
    oImage = null;
    setTimeout(
            function () {
                play()
            }, iFrameRate - iLag
        );

function renderImage(oImage) {
  $("#video")[0].getContext("2d").drawImage(oImage, 0, 0);
}

このビデオ (500 項目、25 fps) を 10 回ループしますが、ff は 1 回も再生できず、スタック オーバーフローが発生します。前に述べたように、IE10 で問題なく動作し、Chrome でさらにうまく動作するため、ここでの問題は再帰ではないと思います。Image オブジェクトを使用して src を設定する以外に、キャンバスにバイナリ データを取得する方法はありますか?

4

1 に答える 1

0

Firefox のバグとしてすでに指摘されています。バグレポートはこちらでご覧いただけます。最終更新日が 2010-09-17 と表示されていますが、新しいバージョンで解決されたかどうかはわかりません。

しかし、新しいバージョンの Firefox ではその問題は発生しないはずです。

于 2012-05-23T10:32:53.157 に答える