3

我正在使用“画布”元素，并尝试在 FIrefox 4 中使用 Javascript 对图像进行一些基于像素的操作。

以下代码泄漏内存，我想知道是否有人可以帮助确定泄漏的内容。

使用的图像是预加载的，一旦加载（到 pImages 数组中），就会调用此代码片段。

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

2 回答 2

1

哦..错误。经过几次测试，内存看起来还不错。
但是还有另一个问题。
更改 img 元素的 src 属性时，tab 进程使用的内存大小正在增长...

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

我试图“删除 img.src”，删除节点...

于 2011-04-17T18:29:10.967 回答
0

更改imageMatrixData = ...为var imageMatrixData = ...可能会有所帮助，但我怀疑这就是全部。但据我所知imageMatrixData，您在每次间隔迭代时都分配了一个全局范围变量，这不健康，尤其是对于大量数据:)

我知道getImageData曾经在 Chrome 中存在内存泄漏，但那是 7 之前的版本，不确定现在情况如何，并且看到你在谈论 ff4 那么这可能是非常无关紧要的。

于 2011-02-03T22:20:50.080 回答