Question

我认为我遇到了与以下问题相关的问题： Systematically updating src of IMG. Memory leak

我没有足够的代表对答案发表评论，但https://stackoverflow.com/a/34085389/3270244正是我的理由。

var canvasElement = $('canvas', camContainer);
var ctx = canvasElement[0].getContext('2d');
var image = new Image();
image.onload = function() {
  ctx.drawImage(this, 0, 0);
  image.src = '';
};

//for every getCamImg I receive exactly 1 image
socket.on('getCamImg', function(err, data) {
  if(data) {
    var dataImg = data.substring(data.indexOf(';') + 1);
    image.src = dataImg;
  }
  socket.emit('getCamImg');
});
socket.emit('getCamImg');

我每1/10更换一次img.src（来自相机的jpeg），我可以看到浏览器消耗的内存越来越多。 Firefox停止在500MB，Edge停在100MB，对于Chrome，我在1G附近停止测试。如果我删除img.src更改，一切运行顺畅（当然没有图像）。

我发现了很多（我认为是这样的）相关问题：

有人提到（对不起这个：D）可能是因为旧图像被保存而缓存垃圾邮件。我不认为这是一个gc问题，因为chrome有一个工具来运行他，没有任何改变。

有人可以复制此内容或以正确的方式指导我吗？

更新

  socket.on('getCamImg', function(err, data) {
    if(data) {
      var image = document.createElement("img");
      image.onload = function() {
        ctx.drawImage(this, 0, 0, ctx.canvas.width, ctx.canvas.height);
        socket.emit('getCamImg');
        image.src = '';
      };
      image.src = dataImg;
    }
  });

这在Firefox中很有用（image.src=''很重要）。 Chrome仍然泄漏。

Answer 1

我和你当前的项目几乎一样。由于这对于评论来说太过分了，我只是在回答中分享我的观察结果。我就是这样做的：

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),

    onNewImgData = function (data) {
        //create a new image element for every base64 src
        var img = document.createElement("img");

        //bind the onload event handler to the image
        img.onload = function () {
            //draw the image on the canvas
            ctx.drawImage(this, 0, 0);
            //do some stuff
            //...
            //done, request next image
        };

        //update the image source with given base64 data
        img.src = "data:image/bmp;base64," + data;
    };

我没有清理任何内容，我无法在应用程序中看到内存泄漏（无论哪个浏览器）。但之前我有一个内存泄漏，因为我将所有base64数据记录到浏览器控制台:)这导致了你所描述的完全相同的问题。

在画布上交换图像会占用内存

1 个答案: