質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

8167閲覧

canvasメソッドで写真(png)に文字を入れ、画像URLを保存したいのですが、画像URLに変換すると写真が消えて、文字だけの画像になってしまいます。

chibi

総合スコア20

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/04/15 21:42

編集2017/04/15 21:52

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

img.src = "photo.png";

1,image#src 要素は非同期です。
=> image#onloadイベントでContext#drawImageを行ってください。

2, image#srcに設定しているimageは質問文ではサーバーの"photo.png"ですが、
もしもクロスオリジンなイメージを設定したい時は注意してくださいなー。
参考
CORS Enabled Image

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title></title> 6</head> 7<body onload="draw();"> 8 <canvas id="canvas1" width="500" height="500"></canvas> 9 10<form method="post" name="send_form"> 11<input type="text" name="field1" id="fld1" value="" /> 12<input type="submit" /> 13</form> 14<script type="text/javascript"> 15var canvas = undefined; 16function draw(){ 17 canvas = document.getElementById('canvas1'); 18 var ctx = canvas.getContext('2d'); 19 /* Imageオブジェクトを生成 */ 20 var img = new Image(); 21 img.onload = function() { 22 ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 23 ctx.fillStyle = "blue"; 24 ctx.fillRect(0, 460, canvas.width, 60); 25 ctx.textAlign="center"; 26 ctx.fillStyle = "white"; 27 ctx.font = "30px 'MS ゴシック'"; 28 ctx.fillText("見出しテキスト", canvas.width/2, canvas.height); 29 fld1.value = canvas.toDataURL(); 30 }; 31 img.src = "photo.png"; 32} 33draw(); 34send_form.action = "load.php"; 35</script> 36</body> 37</html>

投稿2017/04/16 01:24

編集2017/04/18 06:10
umyu

総合スコア5846

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問