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