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

확인. 페이지가로드 될 때 자동으로 아약스를 호출하는 대신 버튼을 통해 수동으로 아약스 호출을 트리거했지만 여전히 동일한 결과를 얻습니다. 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); 
}