2009-11-17 3 views
2

Я использую getImageData/putImageData на холсте HTML5, чтобы иметь возможность манипулировать изображением. Моя проблема в том, что браузеру никогда не кажется free any memory. Пока я не закрою вкладку (протестирован в Chrome и Opera).Проблема с памятью JavaScript с холстом

Переехал их из функции:

var ctx = document.getElementById('leif').getContext('2d'); 
var imgd = ctx.getImageData(0,0,width,height); 
var pix = imgd.data; 
var rndpixel = 0; 

и проблема исчезла!

function infiniteLeif() 
{ 
    for (var i = 0; i<65536; i+=4) { 
    rndpixel=Math.floor(Math.random()*(width*(height-2))+width+4) * 4; 
    pix[rndpixel-wx4] = pix[rndpixel]; pix[rndpixel-wx4+1] = pix[rndpixel+1]; pix[rndpixel-wx4+2] = pix[rndpixel+2]; 
    pix[rndpixel+wx4] = pix[rndpixel]; pix[rndpixel+wx4+1] = pix[rndpixel+1]; pix[rndpixel+wx4+2] = pix[rndpixel+2]; 
    pix[rndpixel-4] = pix[rndpixel]; pix[rndpixel-4+1] = pix[rndpixel+1]; pix[rndpixel-4+2] = pix[rndpixel+2]; 
    pix[rndpixel+4] = pix[rndpixel]; pix[rndpixel+4+1] = pix[rndpixel+1]; pix[rndpixel+4+2] = pix[rndpixel+2]; 
    } 

    ctx.putImageData(imgd,0,0); 
    if (go==1) t=setTimeout(infiniteLeif,40); 
} 

Полный example can be found here (Google Chrome рекомендуется).

Это не проблема setTimeout, потому что я пробовал цикл с тем же эффектом.

Я понял, что удаление круговых ссылок часто является ключом, но действительно ли у меня его есть? Как я могу изменить этот код, чтобы у JavaScript GC появилась возможность сделать это?

+0

Интересно, поддерживает ли холст матрицу пикселей. Перед освобождением холста вы можете установить его в значение null. –

+0

Да, это странно. пытаясь обнулить ВСЕ переменные в конце функции. – Nosredna

ответ

2

Это не поможет, возможно, с вашей утечкой, но вы перезагружаете массив каждые 40 мс данными, которые не изменились.

Возможно, вы захотите использовать замыкание вокруг инициализации.

В принципе, просто создайте переменную, которая имеет функцию с циклом, с информацией о пиксе, заключенной внутри нее.

Затем вы просто продолжаете рекурсивно звонить, где вы не повторно инициализируете, но просто используйте переменную с контуром.

Таким образом, вы повторно используете одну и ту же информацию о пиксе, она поддерживает состояние, которое должно быть прекрасным, если вы не отредактируете холст в другом месте.

+0

Это трюк, спасибо! –

Смежные вопросы