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

Question

我有一个要渲染到画布的图像。 当我像这样渲染它时：

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

但是，当我这样做时，图像在画布上不再可见。

图像是这样创建的：

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"