Swapping Bild auf Leinwand frisst Speicher

Question

Ich glaube, ich habe ein Problem im Zusammenhang mit: Systematically updating src of IMG. Memory leak

Ich habe nicht genug rep auf Antworten zu kommentieren, aber https://stackoverflow.com/a/34085389/3270244 ist genau mein Fall.

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

ich ändere img.src all 1/10s (JPEG-Dateien von einer Kamera) und ich kann beobachten, wie der Browser immer mehr Speicher verbrauchen. Firefox stoppt bei 500 MB, Edge stoppt bei 100 MB und für Chrome habe ich den Test in der Nähe von 1G beendet. Wenn ich die img.src Änderung entferne, läuft alles glatt (ohne ein Bild natürlich).

fand ich eine Menge (leat Ich denke so) Fragen:

• https://bugs.chromium.org/p/chromium/issues/detail?id=36142
• https://bugs.chromium.org/p/chromium/issues/detail?id=337425
• memory leak while drawing many new images to canvas
• Memory leaks when manipulating images in Chrome

Irgendwo jemand erwähnt (sorry für dies: D) dass vielleicht der Cache gespammt wird, weil der alte i Magier werden behalten. Ich denke nicht, dass es ein GC-Problem ist, denn Chrome hat ein Werkzeug, um ihn zu steuern und nichts ändert sich.

Kann jemand dies reproduzieren oder den richtigen Weg führen?

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

Dies funktioniert gut in Firefox (die image.src='' ist wichtig). Chrome leckt immer noch.

Answer 1

Ich mache fast das gleiche wie Sie in meinem aktuellen Projekt tun. Da dies für einen Kommentar zu viel ist, teile ich meine Beobachtungen nur in einer Antwort. Dies ist, wie ich es tun:

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

ich etwas nicht sauber und ich kann nicht ein Speicherleck in meiner Anwendung (egal welcher Browser) sehen. Aber ich hatte vorher ein Speicherleck, als ich alle Base64-Daten in die Browserkonsole eingeloggt habe :) Das verursachte genau das gleiche Problem, das du beschrieben hast.