绘制图像时javascript堆栈溢出

我只是将大量图像（大约5000个）加载到“newimage（）”对象中，并通过调用canvas.drawImage（Image，0，0）在画布中绘制它们

这在IE10中完全可以正常工作，但是一旦我使用Firefox，我就会得到一个堆栈溢出错误，因为Firefox的内存使用会不断增加，直到溢出为止。有人知道为什么吗？我认为GC在将我的图像绘制到画布上后不会真正收集它们。即使我使用100个图像对象，并在绘制它们之前循环图像对象的src，内存使用也会不断增加。我将很快测试Chrome和Safari，但仍然需要一个解决方案，因为每个人都在使用“最好的浏览器”Firefox

编辑：

我确实循环了这个视频（500个项目，25fps）10次，ff甚至不能播放一次，这是堆栈溢出的原因。

---

正如我之前提到的，它在IE10上运行良好，在Chrome上运行更好，所以我认为这里的问题不在于递归。除了使用图像对象和设置src之外，还有其他方法将二进制数据放入画布吗？

Firefox中已经指出这是一个bug。你可以看到这张照片。它显示了最后一次修改的日期2010-09-17，但我不确定它是否在更新版本中得到了解决

---

但我想新版本的Firefox不应该有这个问题。

您使用的是哪一版本的Firefox，我这样问是因为这是以前版本中的一个错误。堆栈溢出通常意味着您有一个无限（或至少非常深）的递归。您的代码实际上是什么样子的？我使用的是FF12.0。代码实际上看起来像：var oImage=newimage（）；oImage.onload=function（）{renderImage（this）；}oImage.src=window.Video[window.FrameCtr]；其中renderImage（此）只是调用drawImage（image，0，0）和window.Video是createObjectUrl（二进制数据）的数组。。此代码以每秒15-25次的setTimeout调用。请在此处更新问题中的代码。您链接的错误在2007年底在Firefox 2.0中修复。我使用的是FF 12.0，我想这是最新版本？

function play() {
    //calculated iLag here
    //calculated wondow.FrameCtr here
    var iFrameRate = Math.round(1000 / 25);
    var oImage = new Image();
    oImage.onload = function () {
        renderImage(this);
    }
    //window.Video is an array of window.URL.createObjectURL(data) (about 500 items)
    oImage.src = window.Video[window.FrameCtr];
    oImage = null;
    setTimeout(
            function () {
                play()
            }, iFrameRate - iLag
        );

function renderImage(oImage) {
  $("#video")[0].getContext("2d").drawImage(oImage, 0, 0);
}