畫布 - DrawImage方法

Question

我得到了一個奇怪的問題，「DrawImage」 - 畫布元素的方法。用下面的代碼創建畫布並將其附加到「rightcanvas」div。

var rightcanvas = document.getElementById('rightcanvas'); 
rcanvas = document.createElement('canvas'); 
rcanvas.setAttribute('width', canvasLength); 
rcanvas.setAttribute('height', canvasHeight); 
rcanvas.setAttribute('id', 'rcanvas'); 
rightcanvas.appendChild(rcanvas); 

現在我試着繪製一個Base64編碼圖像。

var rcontext = rcanvas.getContext('2d'); 
var image = new Image(); 
image.src = 'data:image/png;base64,iVBOR....'; 
rcontext.drawImage(image,0,0); 

畫布將被創建並附加。但圖像不會顯示。有人知道問題是什麼？ =（

Answer 1

你要等待圖像繪製它在畫布前加載。

var image = new Image(); 
image.onload = function() { 
    rcontext.drawImage(image, 0, 0); 
} 
image.src = 'data:image/png;base64,iVBOR....';