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

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

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

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

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

Q&A

解決済

1回答

5683閲覧

canvasにて変換した画像の戻しができません

kihokutarou

総合スコア59

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

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

0グッド

0クリップ

投稿2018/01/28 09:53

canvasにて書き込んだものを画像に保存することはできました。
以前の質問にて、当方の「Chromeにて完全にローカルで完結したい」という希望に対して、回答者様より一るの方法として「--allow-file-access-from-filesフラグを付けて起動」と助言を受け解決に至りました。

今回躓いたのは、この「画像化したもの」をもう一度キャンパス上に戻したい、という部分で困っています。
下記にありますが、

javascript

1function chgImg2() 2{ 3 var png = canvas.toDataURL("image/png"); 4 document.getElementById("newImg2").src = png; 5}

にて画像に書き出しました。おそらくputImageDataで戻すのだと思いますが、キャンパス上ではデフォルトの状態ではなく、ローカルから画像を取り出して絵画しているため、うまくいっていないような気がします。下記コードで、いわゆる「キャンパスの背景」をロードしている関係でしょうか。またはローカルから画像を呼び出して描写している機能が邪魔をしている?

javascript

1onload = function() { 2 draw(); 3}; 4function draw() { 5 var canvas = document.getElementById("drawArea"); 6 if ( ! canvas || ! canvas.getContext ) { return false; } 7 var ctx = canvas.getContext("2d"); 8 /* Imageオブジェクトを生成 */ 9 var img = new Image(); 10 img.src = "a.jpg?" + new Date().getTime();

流れとしては、
1 ローカルの画像を呼び出す
2 canvasで様々書き込む
3 画像に変換して保存する
4 別な書き込み等をする
5 3にて保存した画像をキャンパス上に再度呼び出す

ということをしたいと思っています。
当方かなりの素人で勉強中ですが、どなたかご教示ください。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>汎用お絵かきチャレンジ</title> 6 <link rel="stylesheet" type="text/css" href="wboard.css"> 7</head> 8<body> 9 10<div class="wrapper"> 11<form> 12<p> 13&nbsp;&nbsp;&nbsp; 14<input type="button" class="b1" style="background: #000000;" value=" " onclick="change_black()"> 15<input type="button" class="b1" style="background: #ff0000;" value=" " onclick="change_red()"> 16<input type="button" class="b1" style="background: #00ff00;" value=" " onclick="change_green()"> 17<input type="button" class="b1" style="background: #0000ff;" value=" " onclick="change_blue()"> 18<input type="button" class="b1" style="background: #ffffff;" value=" " onclick="change_white()"> 19&nbsp;&nbsp;線幅&nbsp; 20<input type="button" class="b2" value="8px" onclick="change_8()"> 21<input type="button" class="b2" value="16px" onclick="change_16()"> 22&nbsp;&nbsp; 23<input type="button" class="b2" value="全面" onclick="spread()"> 24<input type="button" class="b2" value="消去" onclick="clr()"> 25<font size="5" color="#ff0000"><a href="javascript:location.reload();">最初から</a></font> 26&nbsp;&nbsp;画像&nbsp; 27<input id="ufile" name="ufile" type="file" accept="image/jpeg,image/png"> 28<input type="button" value="画像に変換" onclick="chgImg()"> 29<input type="button" value="画像に変換2" onclick="chgImg2()"> 30</form> 31 32 33<canvas id="drawArea"></canvas> 34<img id="newImg"> 35<img id="newImg2"> 36 37 38<script src="wboard.js"></script> 39<script src="jquery.min.js"></script> 40<script type="text/javascript" src="jquery-ui-1.8.12.custom.min.js"></script> 41<script type="text/javascript" src="jquery.ui.touch-punch.js"></script> 42 43 <script> 44 $(function(){ 45 46 // id="ufile"の変化でコールバック 47 $("#ufile").change(function(){ 48 // 選択ファイルの有無をチェック 49 if (!this.files.length) { 50 alert('ファイルが選択されていません'); 51 return; 52 } 53 54 // Formからファイルを取得 55 var file = this.files[0]; 56 57 // (1) HTMLのCanvas要素の取得 58 var canvas = $("#drawArea"); 59 60 // (2) getContext()メソッドで描画機能を有効にする 61 var ctx = canvas[0].getContext('2d'); 62 63 // 描画イメージインスタンス化 64 var image = new Image(); 65 66 // File API FileReader Objectでローカルファイルにアクセス 67 var fr = new FileReader(); 68 69 // ファイル読み込み読み込み完了後に実行 [非同期処理] 70 fr.onload = function(evt) { 71 72 // 画像がロードされた後にcanvasに描画を行う [非同期処理] 73 image.onload = function() { 74 // (3) プレビュー(Cnavas)のサイズを指定 75 var cnvsH = ctx.canvas.height; 76 var cnvsW = image.naturalWidth*cnvsH/image.naturalHeight; 77 // (4) Cnavasにサイズアトリビュートを設定する 78 canvas.attr('width', cnvsW); 79 canvas.attr('height', cnvsH); 80 // (5) 描画 81 ctx.drawImage(image, 100, 0, cnvsW, cnvsH); 82 } 83 // 読み込んだ画像をimageのソースに設定 84 image.src = evt.target.result; 85 } 86 87 // fileを読み込む データはBase64エンコードされる 88 fr.readAsDataURL(file); 89 }) 90 }) 91</script> 92</body> 93</html> 94

javascript

1onload = function() { 2 draw(); 3}; 4function draw() { 5 var canvas = document.getElementById("drawArea"); 6 if ( ! canvas || ! canvas.getContext ) { return false; } 7 var ctx = canvas.getContext("2d"); 8 /* Imageオブジェクトを生成 */ 9 var img = new Image(); 10 img.src = "a.jpg?" + new Date().getTime(); 11 /* 画像が読み込まれるのを待ってから処理を続行 */ 12 img.onload = function() { 13 ctx.drawImage(img, 0, 0,ctx.canvas.width, ctx.canvas.height); 14 } 15} 16 17var canvas = document.getElementById("drawArea"); 18var ctx = canvas.getContext("2d"); 19var width = window.innerWidth; 20var height = window.innerHeight; 21var x = 0, y = 0; 22var color = "#000000"; 23var line = 13; 24canvas.width = width; 25canvas.height = height - 70; 26 27canvas.addEventListener("mousedown", touchStartHandler, false); 28canvas.addEventListener("mouseup", touchEndHandler, false); 29 30canvas.addEventListener("touchstart", ttouchStartHandler, false); 31canvas.addEventListener("touchend", ttouchEndHandler, false); 32 33function touchStartHandler(e) { 34 e.preventDefault(); 35 getTouchPoint(e); 36 ctx.beginPath(); 37 ctx.lineCap = "round"; 38 ctx.lineJoin = "round"; 39 ctx.moveTo(x, y); 40 canvas.addEventListener("mousemove", touchMoveHandler, false); 41} 42 43function touchMoveHandler(e) { 44 e.preventDefault(); 45 getTouchPoint(e); 46 ctx.lineWidth = line; //線の太さ 47 ctx.strokeStyle = color; //線の色 48 ctx.lineTo(x, y); 49 ctx.stroke(); 50} 51 52function touchEndHandler(e) { 53 e.preventDefault(); 54 ctx.closePath(); 55 canvas.removeEventListener("mousemove", touchMoveHandler, false); 56} 57 58function getTouchPoint(e) { 59 x = e.clientX - canvas.offsetLeft; 60 y = e.clientY - canvas.offsetTop; 61} 62 63function ttouchStartHandler(e) { 64 e.preventDefault(); 65 getTTouchPoint(e); 66 ctx.beginPath(); 67 ctx.lineCap = "round"; 68 ctx.lineJoin = "round"; 69 ctx.moveTo(x, y); 70 canvas.addEventListener("touchmove", ttouchMoveHandler, false); 71} 72 73function ttouchMoveHandler(e) { 74 e.preventDefault(); 75 getTTouchPoint(e); 76 ctx.lineWidth = line; //線の太さ 77 ctx.strokeStyle = color; //線の色 78 ctx.lineTo(x, y); 79 ctx.stroke(); 80} 81 82function ttouchEndHandler(e) { 83 e.preventDefault(); 84 ctx.closePath(); 85 canvas.removeEventListener("touchmove", ttouchMoveHandler, false); 86} 87 88function getTTouchPoint(e) { 89 var touch = e.touches[0]; 90 x = touch.pageX - canvas.offsetLeft; 91 y = touch.pageY - canvas.offsetTop; 92} 93 94function spread() { 95 ctx.fillStyle = color; 96 ctx.fillRect(0, 0, canvas.width, canvas.height); 97 document.getElementById("ClickSound").play(); 98} 99 100function clr() { 101 cntx = canvas.getContext("2d"); 102 cntx.clearRect(0, 0, canvas.width, canvas.height); 103 document.getElementById("ClickSound").play(); 104} 105 106function change_black() { 107 color = "#000000"; 108 document.getElementById("ClickSound").play(); 109} 110function change_red() { 111 color = "#ff0000"; 112 document.getElementById("ClickSound").play(); 113} 114function change_green() { 115 color = "#00ff00"; 116 document.getElementById("ClickSound").play(); 117} 118function change_blue() { 119 color = "#0000ff"; 120 document.getElementById("ClickSound").play(); 121} 122function change_white() { 123 color = "#ffffff"; 124 document.getElementById("ClickSound").play(); 125} 126function change_8() { 127 line = 8; 128 document.getElementById("ClickSound").play(); 129} 130function change_16() { 131 line = 16; 132 document.getElementById("ClickSound").play(); 133} 134//canvasデータを画像に変換にする関数 135function chgImg() 136{ 137 var png = canvas.toDataURL("image/png"); 138 document.getElementById("newImg").src = png; 139} 140function chgImg2() 141{ 142 var png = canvas.toDataURL("image/png"); 143 document.getElementById("newImg2").src = png; 144} 145 146

よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

CanvasRenderingContext2DオブジェクトのdrawImageメソッドに渡すことの出来るオブジェクトは以下のとおりです.

  • HTMLImageElement(img要素)/Imageオブジェクト
  • HTMLCanvasElement(canvas要素)オブジェクト
  • ImageBitmapオブジェクト
  • HTMLVideoElement(video要素)オブジェクト

ですから,

JavaScript

1ctx.drawImage(document.getElementById("newImg"), 0, 0);

と記述することで, newImgに保管したCanvasグラフィックをcanvas要素に書き戻すことが可能です.

NOTE:
但し, Imageオブジェクトの書き戻しには画像の読み込みが完了(loadイベントの発生以降)している必要があります.


NOTE:
canvas要素の使い方については個人的にまとめたものがあるので, こちらも参考となさって下さい.
http://defghi1977.html.xdomain.jp/tech/canvasMemo/canvasMemo.htm

投稿2018/01/28 10:16

defghi1977

総合スコア4756

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

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

kihokutarou

2018/01/28 13:44

ご回答ありがとうございます。 まとめも今後参考にさせていただける要素ばかりです。ゆっくり見させてください。 素人なりに考えてみましたがうまくいきません。loadというトリガーで以下の記述をしてみました。 function load() { var canvas = document.getElementById("drawArea"); var ctx = canvas[0].getContext('2d'); var image = new Image(); var fr = newimg fr.onload = function(evt) { image.onload = function() { ctx.drawImage(document.getElementById("newImg"), 0, 0); } } } なにかとんでもない考え違いをしているような気もしますが・・・。 教えていただけるとありがたいです。
kihokutarou

2018/01/28 13:47

var ctx = canvas[0].getContext('2d'); ではなく var ctx = canvas.getContext("2d"); でした。
defghi1977

2018/01/28 14:07 編集

今あなたに必要なのは, 今あるコードを弄ることではなく, 別のプロジェクトとして「img要素で表示されている画像をcanvas要素に書き戻す」短いスクリプトを1から書いてみることです. その行為を通して正しいcanvas要素の使い方が判れば自ずとどうすればよいかが判るはずです. (後ちょっとのところまで来ているので, ぜひあなた自身の力で解決してみて下さい)
kihokutarou

2018/01/28 14:44 編集

承知しました。というかご指摘は痛感しています。勉強します。 もしよければ最後に一つヒントをください。 var fr = newimg frという変数に保存してあったimgのアドレスを入れるべきだと思っているのですが、そしてどうもここが怪しいと思うのですが、 function chgImg() { var png = canvas.toDataURL("image/png"); document.getElementById("newImg").src = png; } でで保存したnewimg指定はあっていますか?もしくは考える方向性としては見当違いでしょうか。 お気に障るようであればご返信はいりませんが、できればぜひ・・・。 追伸 ctx.drawImage(document.getElementById("newImg"), 0, 0); のみの記述でできました・・・。load関係が心配ですが。。。 ありがとうございます。
defghi1977

2018/01/28 14:54

いつ変数newimgを定義したのですか? --- 結論から申し上げると, ここで躓く理由がわからないのです. となると提示した回答の中身を一切理解していない(出来ていない)ことになる. であれば, あなたに足りないのはまず(canvas要素を扱う以前の)コードを読み解く為の基礎的な力であり, いたずらに解決策を提示することはあなたのためにならないと判断したまでです.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問