0

我只是将大量图像（大约 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 之外，还有其他方法可以将二进制数据放入画布吗？

4

1 回答 1

0

它已经被记录为 Firefox 中的一个错误。您可以在此处查看错误报告。它显示的最后修改日期为 2010-09-17，但我不确定它是否已在较新版本或什么中得到解决。

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

于 2012-05-23T10:32:53.157 回答