1

JavaScriptのdrawImageを使用して、Firefoxでバッファキャンバスから別のキャンバスに描画しようとしています。かなり大きなキャンバスを使用して、フレームごとに複数回ドローを呼び出しています。私のメモリ使用量はFirefoxの屋根を突き抜けますが、Chromeではほとんどピークに達しません。この動作の理由と、描画された画像が不要になった後に使用されたメモリ（私が想定している）を解放するための回避策があるかどうかについて興味があります。

globalCompositeOperation ='source-in'を使用してレンダリングする必要があるため、このメソッドを使用しています。

基本的な考え方は次のとおりです。

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
//set height and width of canvas to browser window

var dummyCanvas = document.createElement('canvas');
var dummyctx = dummyCanvas.getContext('2d');
dummyCanvas.width = canvas.width;
dummyCanvas.height = canvas.height;

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    //draw some stuff on normal canvas

    dummyCtx.clearRect(0, 0, canvas.width, canvas.height);

    //draw a polygon on buffer canvas
    dummyctx.globalCompositeOperation = 'source-in';
    //draw another polygon on buffer canvas

    ctx.drawImage(dummyctx.canvas, 0, 0);

    //draw some more stuff on normal canvas
}

このメモリの問題はFirefoxの単なるバグですか？私は何か間違ったことをしていますか？回避策はありますか？

助けてくれてありがとう！

4

2 に答える 2

0

キャンバスに複数の絵を描いていると、なぜか絵が重なっていることに気づきました。たぶん、キャンバスに再び排水する前に、キャンバスをクリアするのに役立つでしょう：

context.clearRect(0, 0, canvas.width, canvas.height);
var w = canvas.width;
canvas.width = 1;
canvas.width = w;

少し前に行った画像のサイズ変更からこれを取得しました：http://boxed.hu/articles/html5-client-side-image-resize/

しかし、これはヒントにすぎません。どのように機能したかを教えてください。

于 2012-06-01T16:23:49.233 に答える
0

jquery.rotateプラグインでメモリ リークの問題が発生し、IE のメモリ使用量が増加しました。描画はメモリを消費しますが、元の画像が操作された画像に置き換えられたときに問題が発生することがわかりました。どうやら、画像はメモリに積み上げられていたようです。行は次のとおりです。

p.parentNode.replaceChild(canvas, p);

そのため、jQuery 関数 replaceWith() を使用するように変更し、いくつかの画像を回転させた後、メモリのスタックが停止しました。

$(p).replaceWith(canvas);

replaceWith 関数を見ると、実際にオブジェクトが削除され (おそらく最終的には removeChild と appendChild が使用されます)、新しいオブジェクトが DOM に追加されます。私の推測では、ブラウザーが replaceChild() を実装する方法に違いがあると思います。

于 2012-12-12T16:51:56.577 に答える