manipular - ¿Qué es la pérdida de memoria con este uso de getImageData, javascript, canvas HTML5

javascript mostrar imagen

Question

Estoy trabajando con el elemento ''canvas'' y tratando de hacer algunas manipulaciones de imágenes basadas en píxeles con Javascript en FIrefox 4.

El siguiente código pierde memoria, y me pregunté si alguien podría ayudar a identificar qué se está filtrando.

Las imágenes utilizadas están precargadas, y este fragmento de código se llama una vez que se cargan (en la matriz 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);        
    }

Answer 1

Cambiar imageMatrixData = ... a var imageMatrixData = ... podría ayudar un poco, pero dudo que esa sea la historia completa. Pero, por lo que puedo decir, imageMatrixData es una variable de ámbito global que se asigna en cada iteración de intervalo, y eso no puede ser saludable, especialmente con una gran cantidad de datos :)

Sé que getImageData solía usar memoryleak en Chrome pero esa era la versión 7 anterior, no estoy seguro de cómo es ahora, y dado que estás hablando de ff4, probablemente sea muy irrelevante.

Answer 2

Oh ... error. La memoria se ve bien después de algunas pruebas.
Pero hay otro problema.
El tamaño de la memoria utilizada por proceso de tabulación está aumentando al cambiar la propiedad src de los elementos img ...

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

Intenté "eliminar img.src", eliminar nodo ...