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

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();

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

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

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

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

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要素を扱う以前の）コードを読み解く為の基礎的な力であり, いたずらに解決策を提示することはあなたのためにならないと判断したまでです.

行動規範の内容に同意します