You are first calling loadImages
, then getting the data URL right after that loadImages
call. However, as your loadImages
implementation shows, calling it merely starts the loading process; the callback is called when all images have been loaded, which is some time in the future.
Currently you're getting a blank image because the images have not been loaded yet, so your callback is not called yet, and as a result your canvas is still empty.
In short, everything that relies on the images having being loaded (e.g. your expected toDataURL
result) should be executed when those images are actually loaded - thus in the callback.
loadImages(sources, function(images) {
context.drawImage(images.darthVader, 250, 30, 250, 250);
context.drawImage(images.yoda, 530, 30, 250, 250);
var dataURL = canvas.toDataURL();
document.getElementById("canvasImg").src = dataURL;
});
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…