Question

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

这对IE10完全没问题，但是一旦我使用Firefox，我就会收到堆栈溢出错误，因为不知何故Firefox的内存使用量会上升并上升直到溢出。有谁知道为什么？我认为GC在将它们绘制到画布后不会真正收集我的图像。即使我使用100个Image对象并在绘制它们之前循环使用Image对象的src，内存使用量也会上升和上升。我将尽快测试Chrome和Safari，但仍然需要一个解决方案，因为每个人都在使用“最好的浏览器”Firefox。

编辑：

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

我将此视频（500项，25fps）循环10次，并且ff甚至无法播放一次，导致堆栈溢出。正如我之前提到的，它与IE10一起工作正常并且在Chrome上工作得更好，所以我认为这里的问题不是递归。有没有其他方法可以在画布中获取二进制数据，而不是使用Image对象并设置src？

Answer 1

已经注意到它是Firefox中的一个错误。你可以看到bug report here。它显示的是2010-09-17的最后修改日期，但我不确定它是否已在较新版本或更新版本中得到解决。

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

绘制图像时javascript堆栈溢出

1 个答案: