Javascript Bild nicht auf Leinwand nach dem Zeichnen es auf Offscreen Canvas

Question

Ich habe ein Bild, das ich auf einer Leinwand rendern möchten. Wenn ich es so rende:

context.drawImage(image, x, y); 

Es funktioniert wie erwartet. Jedoch, wenn ich dies tun:

if (image.loaded) 
    image = getPreRendered(image); 
... 
var renderedImages = []; 
var tmpImage = null; 
function getPreRendered(img) { 
    imageIndex = ("" + img.src); 
    tmpImage = cachedSprays[tmpIndex]; 
    if (tmpImage == undefined) { 
     var tmpCanvas = document.createElement("canvas"); 
     var tmpContext = tmpCanvas.getContext('2d'); 
     tmpCanvas.width = 50; 
     tmpCanvas.height = 50; 
     tmpContext.drawImage(img, 0, 0, 100, 100); 
     tmpContext.imageSmoothingEnabled = false; 
     tmpContext.webkitImageSmoothingEnabled = false; 
     tmpContext.mozImageSmoothingEnabled = false; 
     tmpContext.drawImage(tmpCanvas, 0, 0, 50, 50, 0, 0, 100, 100); 
     tmpImage = tmpCanvas; 
     cachedSprays[imageIndex] = tmpImage ; 
    } 
    return tmpImage ; 
} 

Als ich dies jedoch tun, ist das Bild nicht mehr sichtbar auf der Leinwand.

Das Bild wird wie folgt erstellt:

var image = new Image(); 
image.loaded = false; 
image.onload = function() { 
    image.loaded = true; 
}; 

Answer 1

AJAX und Bild Anrufe sind asynchrone. Ein Bild wird/würde geladen, aber Sie haben diese Funktion bereits aufgerufen, während das Bild noch geladen wurde.

var image = new Image(); 
image.onload = function() { 
    // call here your render canvas function: 
    getPreRendered(image); 
}; 
image.src = "nOOdes.jpg"