恢復與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); 
}