Leinwandbild aktualisieren, wenn image.src eine Zeitangabe hat

Question

Mit diesem Code versuche ich ein Canvas mit einem gezeichneten Bild zu aktualisieren, wenn imageUpdated true ist.
Ich benutze einen Zeitplan, so dass das Bild nicht aus dem Browser-Cache geladen wird.
Aber wenn ich Fahrpläne benutze bleibt die Leinwand leer. Es funktioniert ohne die Fahrpläne.

var imageUpdated = true; 
if(imageUpdated) 
{ 
    imageUpdated = false; 
    var heightImg = new Image; 
    heightImg.src = '/path/to/image.png?' + new Date().getTime().toString(); 
    this.canvas = $('<canvas />')[0]; 
    this.canvas.width = this.width; 
    this.canvas.height = this.height; 
    this.canvas.getContext('2d').drawImage(heightImg, 0, 0, this.width, this.height); 
} 
/*rest of event happens here*/ 

Vielen Dank!

Answer 1

Wahrscheinlich liegt es daran, dass Sie das Bild zeichnen, bevor es geladen wird. Ich denke, das ist auch der Grund, warum es ohne den Zeitplan funktioniert, es ist bereits im Cache, so dass sofort gezeichnet werden kann.

Eine Lösung wäre zu zeichnen, nachdem das Bild geladen wurde. Fügen Sie daher im Bild einen eventListener hinzu:

image.addEventListener('load', callback); 

Innerhalb des Callbacks zeichnen Sie das Bild auf der Zeichenfläche.

Zum Beispiel:

// add eventlistener 
heightImg.addEventListener('load', function(e) { 
    var width = heightImg.width; 
    var height = heightImg.height; 

    var canvas = document.querySelector('canvas'); 
    canvas.width = width; 
    canvas.height = height; 

    canvas.getContext('2d').drawImage(heightImg, 0, 0, width, height); 
}); 

// trigger the loading 
heightImg.src = url + '?time=' + new Date().getTime().toString(); 

Und ein Fiddle