使用 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，当对象不再被引用时，它们应该被垃圾回收。所有变量都是局部的。我认为这没有帮助，但为了安全起见，我将所有变量都设置为空。如果我删除使用 getImageData 的行，则没有泄漏。所以我想一定有一个我没有清理的参考。对吗？

Answer 1

Chrome 的任务管理器可能不是您可以使用的最可靠的工具。他们甚至集成了一条消息“注意：此页面将显示所有运行浏览器的内存使用情况，而不仅仅是 Chrome。（错误：我们严重高估了自己的内存使用量：问题 25454。）"

尝试使用 Chrome dev tools（Windows 上的 F12；mac 上的 cmd+opt+i）。打开时间线选项卡并记录约 10-20 秒。它应该可以帮助您缩小任何泄漏的范围。 FWIW，当我这样做时，我没有观察到泄漏。

使用 getImageData 时内存泄漏

Memory leak when using getImageData

javascript

canvas

html5-canvas