3

I think I have a problem related to: Systematically updating src of IMG. Memory leak

I don't have enough rep to comment on answers but https://stackoverflow.com/a/34085389/3270244 is exactly my case.

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

I change img.src every 1/10s (jpegs from a camera) and I can watch the browsers consume more and more memory. Firefox stops at 500MB, Edge stops at 100MB and for Chrome I stopped testing near 1G. If I remove the img.src change everything runs smooth (without an image of course).

I found a lot of (at leat I think so) related issues:

Somewhere someone mentioned (sorry for this :D) that maybe the cache is spammed because the old images are kept. I don't think it's a gc problem, because chrome has a tool to run him and nothing changes.

Can someone reproduce this or guide me the correct way?

Update:

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

This works good in Firefox (the image.src='' is important). Chrome still leaks.

Community
  • 1
  • 1
Sindbad
  • 75
  • 6

1 Answers1

0

I'm doing nearly the same as you do in my current project. As this is too much for a comment I just share my observations in an answer. This is how I do it:

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

I don't clean up anything and I can't see a memory leak in my application (no matter which browser). But I had a memory leak before, as I logged all the base64 data into the browser console :) That caused the exact same issue you've described.

Fidel90
  • 1,828
  • 6
  • 27
  • 63
  • Ok, just to be clear. You do this multiple times a second (the `img.src = ...` part)? The idea with the console.log is good but I checked this first :D – Sindbad Apr 20 '16 at 13:19
  • Exactly. Everytime I receive new image data from my websocket I call the above function. This works with up to 20FPS in my current implementation. Without any leak. – Fidel90 Apr 20 '16 at 13:21
  • Did you checked this in chrome? Sorry to be niggling but I can't see the fundamental difference :/ – Sindbad Apr 20 '16 at 13:24
  • Something that comes to my mind: Do you `a)` actually request each image from your server when you are done displaying the current one or `b) `does your server just send images to your client, no matter if he's available for new rendering? I'm doing `a)` and I would recommend that ;) – Fidel90 Apr 20 '16 at 13:26
  • Yes, it works in Chrome, Edge and FF. Chrome is my main browser and there RAM usage rarely goes near 100MB when using the above code. – Fidel90 Apr 20 '16 at 13:27
  • I did `b`, but you are right! Thanks for this. Don't know why I did it the other way. But this doesn't solve the problem mh .. ok so I need to investigate further... I need a break from this. I give it a new try tomorrow and give feedback! – Sindbad Apr 20 '16 at 13:28
  • Ok, good luck man :) Maybe you can create a Fiddle that reproduces the problem. – Fidel90 Apr 20 '16 at 13:32
  • how to use this function? kinda lost here:D – Tirolel Jan 16 '19 at 14:16