canvasメソッドで写真(png)を読み込んで、写真の上に文字を描画し、toDataURL()でURLに変換して保存したいと思っています。
canvasメソッドで写真を読み込んで文字を描画すると、ブラウザには文字が入った写真が表示されるのですが、toDataURL()で返される画像では写真が消えて文字だけの画像になっています。
加工後の写真を保存するにはどうすれば良いのでしょうか?
html
1<body onload="draw();"> 2 <canvas id="canvas1" width="500" height="500"></canvas> 3</body> 4 5<form method="post" name="send_form"> 6<input type="text" name="field1" id="fld1" /> 7<input type="submit" /> 8</form>
javascript
1<script type="text/javascript"> 2var canvas = ""; 3function draw(){ 4 canvas = document.getElementById('canvas1'); 5 if (canvas.getContext){ 6 var ctx = canvas.getContext('2d'); 7 /* Imageオブジェクトを生成 */ 8 var img = new Image(); 9 img.src = "photo.png"; 10 /* 画像を描画 */ 11 ctx.drawImage(img, 0, 0,500,500); 12 13 /* 文字の背景と文字を描画 */ 14 ctx.fillStyle = "blue"; 15 ctx.fillRect(0,460,500,60); 16 var ctx2 = canvas.getContext('2d'); 17 ctx2.textAlign="center"; 18 ctx2.fillStyle = "white"; 19 ctx2.font = "30px 'MS ゴシック'"; 20 ctx2.fillText("見出しテキスト",250,500); 21 } 22} 23draw(); 24 25send_form.action = "load.php"; 26fld1.value = canvas.toDataURL(); 27 28</script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。