What is leaking memory with this use of getImageData, javascript, HTML5 canvas

问题

I am working with the 'canvas' element, and trying to do some pixel based manipulations of images with Javascript in FIrefox 4.

The following code leaks memory, and i wondered if anyone could help identify what is leaking.

The images used are preloaded, and this code fragment is called once they are loaded (into the pImages array).

    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);        
    }

回答1:

Changing imageMatrixData = ... to var imageMatrixData = ... might help a bit, but I doubt that is the full story. But as far as i can tell imageMatrixData is a global scope variable that you assign on every interval iteration, and that cannot be healthy especially with a big chunk of data :)

I know that getImageData used to memoryleak in Chrome but that was pre version 7, not sure how it is now, and seeing as you are talking about ff4 then that is probably very irrelevant.

回答2:

Oh.. mistake. The memory lookes OK after few test.
But there is another problem.
The size of used memory by tab process is growing when changing the src property of img elements...

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

I've tried to "delete img.src", remove node...

来源：https://stackoverflow.com/questions/4892265/what-is-leaking-memory-with-this-use-of-getimagedata-javascript-html5-canvas

标签

javascript

memory-leaks

canvas

getimagedata