使用getImageData時發生內存泄漏

Question

大家好，謝謝您的寶貴時間。 我在使用getImageData時遇到問題。 這是一些示例代碼。

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

當我在Chrome中運行此代碼並打開Chrome任務管理器（Shift + Esc）時。 它表明瀏覽器選項卡和GPU內存都在不斷增加。 在Firefox中也是如此。 根據我對javaScript的了解，當不再引用對象時，應該對其進行垃圾回收。 所有變量都是局部的。 我認為這沒有幫助，但是為了安全起見，我將所有變量都設置為null。 如果刪除使用getImageData的行，則不會泄漏。 因此，我想一定有一個我無法清理的參考。 對？

Answer 1

Chrome的任務管理器可能不是您可以使用的最可靠的工具。 他們甚至集成了一條消息“注意：此頁面將顯示所有正在運行的瀏覽器的內存使用情況，而不僅僅是Chrome。（錯誤：我們嚴重誇大了自己的內存使用情況：問題25454。”）

嘗試使用Chrome開發者工具 （在Windows上為F12；在Mac上為cmd + opt + i）。 打開時間軸標簽，並記錄約10-20秒。 它應該可以幫助您縮小泄漏范圍。 FWIW，當我這樣做時，我沒有發現泄漏。