使用getImageData时发生内存泄漏

Question

Hello all and thanks for your time. I'm having an issue using getImageData. Here is some example code.

function readImage()
{
    var test_image = new Image();
    test_image.src = "images/testImage.png";
    test_image.onload = function() 
    {
        var testCanvas = document.createElement( 'canvas' );
        if ( testCanvas.getContext ) 
        {
            testCanvas.width = test_image.width;
            testCanvas.height = test_image.height;
            var image_ctx = testCanvas.getContext( "2d" );
            image_ctx.drawImage( test_image, 0, 0 );
            var pix = image_ctx.getImageData( 0, 0, test_image.width, test_image.height ).data;

            pix = null;
            image_ctx = null;
            test_image = null;
            testCanvas = null;
        }
    }
}

updateMDPixelArray = setInterval(
    function()
    {
        readImage();
    }, 1000
);

When I run this code in Chrome and open the Chrome task manager( Shift + Esc ). It shows that both the browser tab and GPU memory increase constantly. The same happens in Firefox. From what I know about javaScript, objects should be garbage collected when they are no longer being referenced. All variables are local. I don't think it's helping but just to be on the safe side I set all the variables to null. There is no leak if I remove the line that uses getImageData. SO I guess there must be a reference that I'm failing to clean up. Right?

Answer 1

Chrome's task manager probably isn't the most reliable tool you can use. They even integrated a message "Note: This page will show memory use for all running browsers, not just Chrome. (Bug: We seriously overcount our own memory usage: Issue 25454.)"

Try using the Chrome dev tools (F12 on Windows; cmd+opt+i on mac). Open the timeline tab and record for ~10-20 seconds. It should help you narrow down any leaks. FWIW, when I do this I do not observe a leak.