Что утечка памяти с этим использованием getImageData, JavaScript, HTML5 canvas - PullRequest
Новая
       31

Что утечка памяти с этим использованием getImageData, JavaScript, HTML5 canvas

3 голосов
/ 04 февраля 2011

Я работаю с элементом canvas и пытаюсь выполнить некоторые пиксельные манипуляции с изображениями с помощью Javascript в FIrefox 4.

Следующий код пропускает память, и я подумал, может ли кто-нибудь помочь определить, чтопротекает.

Используемые изображения предварительно загружены, и этот фрагмент кода вызывается после загрузки (в массив 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);        
    }

Ответы [ 2 ]

1 голос
/ 17 апреля 2011

Ох .. ошибка. Память выглядит нормально после нескольких тестов.
Но есть и другая проблема.
Размер используемой памяти процессом табуляции увеличивается при изменении свойства src элементов img ... 

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

Я пытался "удалить img.src", удалить узел ...

0 голосов
/ 04 февраля 2011

Изменение imageMatrixData = ... на var imageMatrixData = ... может немного помочь, но я сомневаюсь, что это полная история.Но, насколько я могу судить, imageMatrixData - это глобальная переменная области видимости, которую вы назначаете на каждой итерации интервала, и которая не может быть полезной, особенно при большом куске данных:)

Я знаю, что getImageData использовалдля утечки памяти в Chrome, но это было до версии 7, не уверен, как оно сейчас, и, видя, как вы говорите о ff4, это, вероятно, очень не имеет значения.

...