drawImage（HTML5CanvasElement）Firefox內存指數增加

我試圖使用JavaScript drawImage從緩衝區畫布繪製到另一個在Firefox中;我使用相當大的畫布每幀多次調用繪圖。我的內存使用率在Firefox中居首，但在Chrome中幾乎沒有達到頂峯。我很好奇這種行爲的原因，並且如果有一種解決方法可以在不再需要的情況下通過繪製圖像釋放使用的內存（我假設）。drawImage（HTML5CanvasElement）Firefox內存指數增加

我需要渲染使用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中的錯誤？難道我做錯了什麼？有沒有解決方法？

非常感謝您的幫助！

來源

2012-06-01 alaska.alex

您是否設法找到解決方案？我正面臨完全相同的問題 – KeitIG

我不確定圖像是以某種方式堆放在畫布上，當我不止一個時。也許這將有助於清除TE帆布，再次draing到它之前：

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-01 16:23:49

謝謝，但我實際上每一幀清理畫布，作爲程序正常運行循環的一部分;所以他們不會堆疊。 –

我有一個內存泄漏問題，使用jquery.rotate插件增加了IE上的內存使用，發現儘管繪圖佔用內存，但問題在於原始圖像被操作圖像取代時。顯然這些圖像只是在記憶中堆積起來。該生產線是：

p.parentNode.replaceChild(canvas, p);

所以我改爲使用jQuery函數replaceWith（）和內存停止轉動幾個圖像後疊加起來：

$(p).replaceWith(canvas);

望着replaceWith功能，它實際上消除了對象（最終可能使用removeChild和appendChild）並將新的對象附加到DOM。我的猜測是，瀏覽器如何實現replaceChild（）是有區別的。

來源

2012-12-12 16:51:56 bubbassauro

drawImage（HTML5CanvasElement）Firefox內存指數增加

回答

相關問題