将 Javascript 图像绘制到屏幕外 Canvas 后未在 Canvas 上绘制

Question

我有一个要渲染到 Canvas 上的图像。当我这样渲染它时:

context.drawImage(image, x, y);

它按预期工作。但是，当我这样做时:

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

然而，当我这样做时，图像在 Canvas 上不再可见。

图像是这样创建的:

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

Answer 1

AJAX 和图像调用是异步。图像将/将加载，但您已经在图像仍在加载时调用了该函数。

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