2012-04-11 12 views
0

キャンバスに.jpgを入れ、長方形と文字列を追加して、とてもうまくいっていきたいと思います。その後、キャンバスのjpgを作成したいと思いますが、キャンバスのjpgは長方形と文字列のみを表示します。クイックコード例 - 私はその醜いキャンバスを知っている - ちょうどテスト;)キャンバスに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> 
} 

上部(キャンバス)でIMGが正しく示されているが、それbeneth .JPEGにIMGは示されていません。ヘルプは素晴らしいだろう。ありがとう。

答えて

0

画像を保存してもまだ読み込まれていません。

img.onloadでtoDataUrlを入れたりイベントにリンクしたり、タイマー

+0

ああどうもありがとうございました。 –