什么是使用getImageData，javascript，HTML5 canvas來泄漏內存

Question

我正在使用'canvas'元素，並試圖在FIrefox 4中使用Javascript對圖像進行一些基於像素的操作。

以下代碼泄漏內存，我想知道是否有人可以幫助識別泄漏的內容。

使用的圖像是預加載的，一旦加載（進入pImages數組），就會調用此代碼片段。

    var canvas = document.getElementById('displaycanvas');
    if (canvas.getContext){
        var canvasContext = canvas.getContext("2d");
        var canvasWidth = parseInt(canvas.getAttribute("width"));
        var canvasHeight = parseInt(canvas.getAttribute("height"));

        // fill the canvas context with white (only at start)
        canvasContext.fillStyle = "rgb(255,255,255)";
        canvasContext.fillRect(0, 0, canvasWidth, canvasHeight);

        // for image choice
        var photoIndex;

        // all images are the same width and height
        var imgWidth    = pImages[0].width;
        var imgHeight   = pImages[0].height;

        // destination coords 
        var destX, destY;

        // prep some canvases and contexts
        var imageMatrixCanvas               = document.createElement("canvas");
        var imageMatrixCanvasContext        = imageMatrixCanvas.getContext("2d");


        // Set the temp canvases to same size - apparently this needs to happen according 
        // to one comment in an example - possibly to initialise the canvas?
        imageMatrixCanvas.width         = imgWidth;
        imageMatrixCanvas.height        = imgHeight;

        setInterval(function() { 
            // pick an image
            photoIndex = Math.floor(Math.random() * 5);

            // fill contexts with random image
            imageMatrixCanvasContext.drawImage(pImages[photoIndex],0,0);
            imageMatrixData = imageMatrixCanvasContext.getImageData(0,0, imgWidth, imgHeight);

            // do some pixel manipulation
            // ...
            // ...

            // choose random destination coords (inside canvas)
            destX = Math.floor(Math.random() * (canvasWidth - imgWidth));
            destY = Math.floor(Math.random() * (canvasHeight - imgHeight));

            // show the work on the image at the random coords
            canvasContext.putImageData(imageMatrixData, destX, destY);
        }, 500);        
    }

Answer 1

哦......錯了。 經過幾次測試，內存看起來還不錯。
但還有另一個問題。
當更改img元素的src屬性時，選項卡進程使用的內存大小正在增長...

Src property = canvas.getContext('2d').toDataURL('image/png') (changing each time);

我試圖“刪除img.src”，刪除節點...

Answer 2

將imageMatrixData = ...更改為var imageMatrixData = ...可能會有所幫助，但我懷疑這是完整的故事。 但據我所知， imageMatrixData是一個全局范圍變量，你在每個間隔迭代時分配，並且這不可能是健康的，特別是對於大塊數據:)

我知道getImageData用於在Chrome中使用memoryleak，但那是7版之前的版本，不知道它現在是怎樣的，並且看到你在談論ff4時那可能是非常無關緊要的。