jpeg 이미지가있는 캔버스

캔버스에 .jpg를 가져오고 사각형과 문자열을 추가하고 싶습니다.이 작업은 매우 효과적입니다. 그 후 캔버스 jpg를 만들고 싶습니다. 잘 작동하지만 jpg 캔버스는 사각형과 문자열 만 표시합니다. IMG가 제대로 표시됩니다) 상부에서jpeg 이미지가있는 캔버스

<!DOCTYPE html> 
<html> 
<body> 
<canvas id="meinCanvas" width="600" height="600" style="border:1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 
</body> 

<script type="text/javascript"> 
var canv = document.getElementById("meinCanvas"); 
var context = canv.getContext("2d"); 
context.fillStyle = "#000000"; 
context.fillRect(10,10, 200, 100); 
var img = new Image(); 
img.onload = function() { 
context.drawImage(img, 300, 300); 
}; 
img.src="one.jpg"; 
context.font = "bold 12px sans-serif"; 
context.fillText("test", 500, 500); 
imgsr = canv.toDataURL("image/jpeg"); 
document.write('<img src="' +imgsr +'"/>'); 
</script> 
</html> 
}

(캔버스),하지만 beneth의 .jpeg에 IMG가 표시되지 않습니다, 빠른 코드 - 예 - 단지 테스트 - 내가 그에게 추한 캔버스를 알고있다. 도움이 될 것입니다. 감사.

출처

2012-04-11 Mike Äfer

이미지를 저장하면 아직로드되지 않습니다.

img.onload에 toDataUrl을 넣거나 이벤트 또는 타이머에 연결하십시오.

출처

2012-04-11 09:15:06 jazzytomato

감사합니다. –

jpeg 이미지가있는 캔버스

답변

관련 문제