2012-04-01 2 views
1

Canvas 요소의 "DrawImage"- 메서드에 이상한 문제가 있습니다. 다음 코드를 사용하여 캔버스를 만들고 "rightcanvas"div에 연결합니다.캔버스 - DrawImage 메서드

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

캔버스가 만들어지고 부착됩니다. 하지만 이미지는 표시되지 않습니다. 문제가 뭔지 아는 사람이 있습니까? = (

답변

2

당신은 이미지가 캔버스에 그리기 전에로드 될 때까지 기다려야한다.

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

아 .. 유에게 매우 매우 = 감사합니다) – Chronnie

+0

이 Btw는 그것을 '당신의 변수 이름을 지정 피하기 위해 더 좋을 것이다 영상'. – grc