恢复与base64字符串的画布

Question

每当我第一次加载页面。图像没有得到恢复，但一旦我加载页面，我打F5。那么它的工作。我不是哪里有什么错我的代码。

// variable r contains the base64 string which is retrieved via a ajax call. 

    var myImage = new Image(); 
    myImage.src = r; 
    var canvas = document.getElementById('myCanvas'); 
    var ctx = canvas.getContext('2d'); 
    ctx.drawImage(myImage, 0, 0); 

好的。不是在加载页面时自动调用ajax，而是通过按钮手动触发ajax调用，但仍得到相同的结果。 base64字符串已成功检索并且未加载映像。但是当我第二次点击按钮时。图像比加载。

Answer 1

var myImage = new Image(); 
myImage.src = r; 
var canvas = document.getElementById('myCanvas'); 
var ctx = canvas.getContext('2d'); 
// wait for it to load before calling draw 
myImage.onload = function() { 
    ctx.drawImage(myImage, 0, 0); 
}