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

Multiple drawimage() on context produces a memory leak

本文关键字：内存 泄漏 drawimage 上下文      更新时间：2023-09-26

我正在从Image对象的数组对画布执行多个drawImage()。在Firefox中，使用不同的图像调用几十次drawImage后，这会导致巨大的内存泄漏，这个过程可能需要1或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中的工作方式，有没有办法清除画布缓存之类的？

这是一个JSFiddle

尝试在测试工具中运行代码并进行一些更改。据我所知，问题在于渲染到画布上的结果图像。尽管您加载的图像文件大小相当低，但最终图像仍然是1280 x 720。即使我更改画布大小并将drawImage调用修改为这样。。。

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

它产生了相同的1280 x 720图像，然后我可以从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);
            });
相关文章：