質問編集履歴

2

質問内容、ソースコード、プロット画像

2018/07/02 13:11

投稿

hiryu-
hiryu-

スコア8

test CHANGED
@@ -1 +1 @@
1
- html2canvasの使方がわかりません
1
+ htmlに表示された画像グループをcanvasに描画した
test CHANGED
@@ -8,21 +8,13 @@
8
8
 
9
9
 
10
10
 
11
- html2canvasンスールて組み込んでみたのですが、着せ替え画面とは別の所に描画される上にボタンにより変更した画像が描画された画像に反映されない状態です。
11
+ 現在のソースコードは[こちら![![イメージ説明](815418fed2a1788fa0f90b92cf5c60b4.jpeg)](f3b21ce55ce741542190a2158fde1ee2.jpeg)](https://www.petitmonte.com/javascript/png_jpeg_gif_convert.html)のサイトを参考にしたのですが、
12
-
13
-
14
-
12
+
15
- Javascriptライブラリ自体初め使うので根本的部分間違っる可能性もあります。
13
+ 保存ボタンを押しも何も映らい真っ黒な画像保存されいます。
16
-
17
-
18
-
14
+
15
+
16
+
19
- プロット画像とコードを載せるので、どの部分が間違っているのかと修正内容のご指南、お願いします。
17
+ プロットとコードを載せるので、どの部分が間違っているのかと修正内容のご指南、お願いします。
20
-
21
-
22
-
23
- ![イメージ説明](2df881f5a0378623242c79000616eb3c.jpeg)
24
-
25
- ![イメージ説明](889eaa7bf9cb1ceefa9d01b99b031d9e.jpeg)
26
18
 
27
19
 
28
20
 
@@ -40,9 +32,105 @@
40
32
 
41
33
 
42
34
 
43
-
35
+ <script>
36
+
37
+
38
+
44
-
39
+ function AsciiToUint8Array (S) {
40
+
41
+ var len = S.length;
42
+
43
+ var P = new Uint8Array(len);
44
+
45
+ for (var i = 0; i < len; i++) {
46
+
47
+ P[i] = S[i].charCodeAt(0);
48
+
49
+ }
50
+
51
+ return P;
52
+
53
+ }
54
+
55
+
56
+
57
+ function SaveToFile(Stream,FileName) {
58
+
59
+
60
+
61
+ // IE/Edge
62
+
63
+ if (window.navigator.msSaveBlob) {
64
+
65
+ window.navigator.msSaveBlob(new Blob([Stream]), FileName);
66
+
67
+ // それ以外
68
+
69
+ } else {
70
+
71
+ var a = document.createElement("a");
72
+
73
+ a.href = URL.createObjectURL(new Blob([Stream]));
74
+
75
+ //a.target = '_blank';
76
+
77
+ a.download = FileName;
78
+
45
- <script src="html2canvas.js"></script>
79
+ document.body.appendChild(a) // FF specification
80
+
81
+ a.click();
82
+
83
+ document.body.removeChild(a) // FF specification
84
+
85
+ }
86
+
87
+ }
88
+
89
+
90
+
91
+ function onClick(option){
92
+
93
+
94
+
95
+ // PNGファイルの作成
96
+
97
+ if (option == 1){
98
+
99
+ var png = canvas.toDataURL("image/png").replace("data:image/png;base64,","");
100
+
101
+ png = window.atob(png);
102
+
103
+
104
+
105
+ var Stream = AsciiToUint8Array(png);
106
+
107
+ SaveToFile(Stream,'dest.png');
108
+
109
+ }
110
+
111
+
112
+
113
+ // JEPGファイルの作成
114
+
115
+ if (option == 2){
116
+
117
+ var png = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,","");
118
+
119
+ png = window.atob(png);
120
+
121
+
122
+
123
+ var Stream = AsciiToUint8Array(png);
124
+
125
+ SaveToFile(Stream,'dest.jpg');
126
+
127
+ }
128
+
129
+ }
130
+
131
+ </script>
132
+
133
+
46
134
 
47
135
 
48
136
 
@@ -92,6 +180,10 @@
92
180
 
93
181
  <div id="chara">
94
182
 
183
+
184
+
185
+ <div>
186
+
95
187
  <img src="images/chara.jpg">
96
188
 
97
189
  <img src="images/kuti1.png" name="kutiLink">
@@ -104,12 +196,26 @@
104
196
 
105
197
 
106
198
 
107
-
108
-
109
199
  </div>
110
200
 
111
201
 
112
202
 
203
+ <br><br>
204
+
205
+ <canvas id="MyCanvas"></canvas>
206
+
207
+
208
+
209
+
210
+
211
+ </div>
212
+
213
+
214
+
215
+
216
+
217
+
218
+
113
219
  </td>
114
220
 
115
221
 
@@ -176,7 +282,25 @@
176
282
 
177
283
 
178
284
 
179
-
285
+ <p>
286
+
287
+
288
+
289
+
290
+
291
+ <button onclick="onClick(1);">PNGファイルの作成</button>
292
+
293
+
294
+
295
+ <button onclick="onClick(2);">JPEGファイルの作成</button>
296
+
297
+
298
+
299
+
300
+
301
+
302
+
303
+ </p>
180
304
 
181
305
  </td>
182
306
 
@@ -290,11 +414,73 @@
290
414
 
291
415
 
292
416
 
417
+
418
+
419
+ // キャンバスの取得
420
+
293
- html2canvas(document.querySelector("#chara")).then(canvas => {
421
+ var canvas = document.getElementById("MyCanvas");
422
+
294
-
423
+ canvas.width = 566;
424
+
425
+ canvas.height = 800;
426
+
427
+ // コンテキストの取得
428
+
429
+ var ctx = canvas.getContext("2d");
430
+
431
+ var max_height = 0;
432
+
433
+
434
+
435
+
436
+
437
+ var imglist = new Array();
438
+
439
+ /imglist[0] = document.getElementById("img_gif");*/
440
+
441
+ imglist[1] = document.getElementById("img_png");
442
+
443
+ imglist[2] = document.getElementById("img_jpg");
444
+
445
+
446
+
447
+ // キャンバスに画像を描画 ←(エラーが起きる部分)
448
+
295
- document.body.appendChild(canvas)
449
+ imglist[0].onload = function() {
450
+
296
-
451
+ ctx.drawImage(imglist[0],0,max_height);
452
+
453
+ max_height += imglist[0].height+30;
454
+
297
- });
455
+ };
456
+
457
+
458
+
459
+ // キャンバスに画像を描画
460
+
461
+ imglist[1].onload = function() {
462
+
463
+ ctx.drawImage(imglist[1],0,max_height);
464
+
465
+ max_height += imglist[1].height+30;
466
+
467
+ };
468
+
469
+
470
+
471
+ // キャンバスに画像を描画
472
+
473
+ imglist[2].onload = function() {
474
+
475
+ ctx.drawImage(imglist[2],0,max_height);
476
+
477
+ max_height += imglist[2].height+30;
478
+
479
+ };
480
+
481
+
482
+
483
+
298
484
 
299
485
 
300
486
 
@@ -310,6 +496,6 @@
310
496
 
311
497
  </html>
312
498
 
313
- コード
499
+
314
500
 
315
501
  ```

1

回答で指摘されたソースコード一部

2018/07/02 13:10

投稿

hiryu-
hiryu-

スコア8

test CHANGED
File without changes
test CHANGED
@@ -42,7 +42,7 @@
42
42
 
43
43
 
44
44
 
45
- /<script src="html2canvas.js"></script>*/
45
+ <script src="html2canvas.js"></script>
46
46
 
47
47
 
48
48