使用getImageData，javascript，HTML5 canvas导致内存泄漏的原因是什么 [英] What is leaking memory with this use of getImageData, javascript, HTML5 canvas

问题描述

我正在使用'canvas'元素，并尝试在FIrefox 4中使用Javascript对图像进行一些基于像素的操作.

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.

所使用的图像已预加载，并且一旦加载(到pImages数组中)，就会调用此代码片段.

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

推荐答案

将imageMatrixData = ...更改为var imageMatrixData = ...可能会有所帮助，但我怀疑这是完整的故事.但据我所知，imageMatrixData是您在每次时间间隔迭代中分配的全局范围变量，并且特别是在有大量数据的情况下，它是不健康的:)

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

我知道getImageData曾经在Chrome中用于内存泄漏，但是那是7版之前的版本，不确定现在的状况如何，然后看到您在谈论ff4，那可能就无关紧要了.

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.

这篇关于使用getImageData，javascript，HTML5 canvas导致内存泄漏的原因是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！