上下文中的多个drawimage()会导致内存泄漏

Question

我正在从Image对象的数组对画布执行多个drawImage()。在火狐中，这导致了一个巨大的内存泄漏，在几十次使用不同图像的drawImage调用之后，这个过程可能会占用1到2 2gb的Ram。

画布和图像尺寸约为1080x608

基本上，我的代码如下所示：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var images = [...]; // Array of loaded image (new Image())
var currentImage = 0;


var interval = setInterval(function() {

    context.drawImage(images[currentImage]);
    currentImage++;

}, 50);

当我清除该间隔时，内存消耗在几分钟后恢复正常。当我从DOM中删除<canvas>时，内存消耗保持不变。

在Chrome或Safari中的行为是不同的，我怀疑这是垃圾收集器在Firefox中的工作方式，有没有办法清除canvas缓存或其他东西？

这是一个JSFiddle

Answer 1

尝试在测试工具中运行代码并进行一些更改。据我所知，问题是关于渲染到画布上的结果图像。尽管您加载的图像具有相当小的图像文件大小，但生成的图像仍为1280x720。即使我更改画布大小并将您的drawImage调用修改为如下所示...

context.drawImage(
    images[currentFrame],
    0, 0, images[currentFrame].width, images[currentFrame].height,
    0, 0, canvas.width, canvas.height);

..。它产生了相同的1280x720图像，然后我可以从Firefox保存它，并且它几乎占用每个图像1Mb，而不是原来的30K左右。每次调用drawImage时，内存都会相应地增加，因为有一个以前没有绘制过的图像。

因此，假设每个图像都由Firefox保存在内存中，这将导致370 * 900K近似，即328Mb。不确定这里还增加了什么，但问题主要是图像转换的问题。Firefox正在存储几张内存比压缩文件格式大得多的1280x720图像，因此内存分配出现了巨大的飞跃。

我甚至将上下文抓取移到了事件处理程序内部，这对内存分配没有任何影响。

忽略下面我加载图像的部分，并根据onload事件设置图像。这可能会导致图像无序。我只是试着看看是否有任何关于图像没有完全预加载的问题。

            var canvas = document.getElementById('main-canvas');
            var canvasProperties = {
                x: canvas.offsetWidth,
                y: canvas.offsetHeight
            };

            var images = [];
            var imagesRange = [0, 369];
            for (var i = imagesRange[0]; i <= imagesRange[1]; i++) {
                var image = new Image();
                image.onload = function(event) {
                    images.push(event.target);
                };
                image.src = 'http://frames.teleport.ninja/frames/electrosanne/lowres1080/frame'
                        + parseId(i) + '.jpg';
            }

            var currentFrame = 0;

            canvas.addEventListener('wheel', function(e) {
                var context = canvas.getContext('2d');
                e.preventDefault();
                if (e.deltaY < 0 && currentFrame > imagesRange[0]) {
                    currentFrame--;
                } else if (e.deltaY > 0 && currentFrame < imagesRange[1]) {
                    currentFrame++;
                }

                context.clearRect(0, 0, canvas.width, canvas.height);
                context.drawImage(
                    images[currentFrame],
                    0, 0, images[currentFrame].width, images[currentFrame].height,
                    0, 0, canvas.width, canvas.height);
            });