質問編集履歴
2
質問内容、ソースコード、プロット画像
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
htmlに表示された画像グループをcanvasに描画したい
|
body
CHANGED
|
@@ -3,15 +3,11 @@
|
|
|
3
3
|
|
|
4
4
|
基礎的な着せ替え部分は完成したのですが、肝心の衣装パーツを重ね合わせた状態のpng画像を全て統合した状態で出力するプログラムができていません。
|
|
5
5
|
|
|
6
|
+
現在のソースコードは[こちら](f3b21ce55ce741542190a2158fde1ee2.jpeg)](https://www.petitmonte.com/javascript/png_jpeg_gif_convert.html)のサイトを参考にしたものですが、
|
|
6
|
-
|
|
7
|
+
保存ボタンを押しても何も映らない真っ黒な画像が保存されてしまいます。
|
|
7
8
|
|
|
8
|
-
|
|
9
|
+
プロットとコードを載せるので、どの部分が間違っているのかと修正内容のご指南、お願いします。
|
|
9
10
|
|
|
10
|
-
プロット画像とコードを載せるので、どの部分が間違っているのかと修正内容のご指南、お願いします。
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
11
|
```<!DOCTYPE html>
|
|
16
12
|
<html>
|
|
17
13
|
<head>
|
|
@@ -19,8 +15,56 @@
|
|
|
19
15
|
<link rel="stylesheet" href="base.css">
|
|
20
16
|
<title>着せ替え</title>
|
|
21
17
|
|
|
18
|
+
<script>
|
|
19
|
+
|
|
20
|
+
function AsciiToUint8Array (S) {
|
|
21
|
+
var len = S.length;
|
|
22
|
+
var P = new Uint8Array(len);
|
|
23
|
+
for (var i = 0; i < len; i++) {
|
|
24
|
+
P[i] = S[i].charCodeAt(0);
|
|
25
|
+
}
|
|
26
|
+
return P;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
function SaveToFile(Stream,FileName) {
|
|
30
|
+
|
|
31
|
+
// IE/Edge
|
|
32
|
+
if (window.navigator.msSaveBlob) {
|
|
33
|
+
window.navigator.msSaveBlob(new Blob([Stream]), FileName);
|
|
34
|
+
// それ以外
|
|
35
|
+
} else {
|
|
36
|
+
var a = document.createElement("a");
|
|
37
|
+
a.href = URL.createObjectURL(new Blob([Stream]));
|
|
38
|
+
//a.target = '_blank';
|
|
39
|
+
a.download = FileName;
|
|
40
|
+
document.body.appendChild(a) // FF specification
|
|
41
|
+
a.click();
|
|
42
|
+
document.body.removeChild(a) // FF specification
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
function onClick(option){
|
|
47
|
+
|
|
48
|
+
// PNGファイルの作成
|
|
49
|
+
if (option == 1){
|
|
50
|
+
var png = canvas.toDataURL("image/png").replace("data:image/png;base64,","");
|
|
51
|
+
png = window.atob(png);
|
|
52
|
+
|
|
53
|
+
var Stream = AsciiToUint8Array(png);
|
|
54
|
+
SaveToFile(Stream,'dest.png');
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// JEPGファイルの作成
|
|
58
|
+
if (option == 2){
|
|
59
|
+
var png = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,","");
|
|
60
|
+
png = window.atob(png);
|
|
61
|
+
|
|
62
|
+
var Stream = AsciiToUint8Array(png);
|
|
63
|
+
SaveToFile(Stream,'dest.jpg');
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
</script>
|
|
22
67
|
|
|
23
|
-
<script src="html2canvas.js"></script>
|
|
24
68
|
|
|
25
69
|
</head>
|
|
26
70
|
<body>
|
|
@@ -45,15 +89,24 @@
|
|
|
45
89
|
<td>
|
|
46
90
|
|
|
47
91
|
<div id="chara">
|
|
92
|
+
|
|
93
|
+
<div>
|
|
48
94
|
<img src="images/chara.jpg">
|
|
49
95
|
<img src="images/kuti1.png" name="kutiLink">
|
|
50
96
|
<img src="images/mayu1.png" name="mayuLink">
|
|
51
97
|
<img src="images/me1.png" name="meLink">
|
|
52
98
|
<img src="images/huku1.png" name="hukuLink">
|
|
53
99
|
|
|
100
|
+
</div>
|
|
54
101
|
|
|
102
|
+
<br><br>
|
|
103
|
+
<canvas id="MyCanvas"></canvas>
|
|
104
|
+
|
|
105
|
+
|
|
55
106
|
</div>
|
|
56
107
|
|
|
108
|
+
|
|
109
|
+
|
|
57
110
|
</td>
|
|
58
111
|
|
|
59
112
|
<td>
|
|
@@ -87,7 +140,16 @@
|
|
|
87
140
|
|
|
88
141
|
</p>
|
|
89
142
|
|
|
143
|
+
<p>
|
|
90
144
|
|
|
145
|
+
|
|
146
|
+
<button onclick="onClick(1);">PNGファイルの作成</button>
|
|
147
|
+
|
|
148
|
+
<button onclick="onClick(2);">JPEGファイルの作成</button>
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
</p>
|
|
91
153
|
</td>
|
|
92
154
|
|
|
93
155
|
</tr>
|
|
@@ -144,15 +206,46 @@
|
|
|
144
206
|
}
|
|
145
207
|
|
|
146
208
|
|
|
147
|
-
html2canvas(document.querySelector("#chara")).then(canvas => {
|
|
148
|
-
document.body.appendChild(canvas)
|
|
149
|
-
});
|
|
150
209
|
|
|
210
|
+
// キャンバスの取得
|
|
211
|
+
var canvas = document.getElementById("MyCanvas");
|
|
212
|
+
canvas.width = 566;
|
|
213
|
+
canvas.height = 800;
|
|
214
|
+
// コンテキストの取得
|
|
215
|
+
var ctx = canvas.getContext("2d");
|
|
216
|
+
var max_height = 0;
|
|
217
|
+
|
|
218
|
+
|
|
219
|
+
var imglist = new Array();
|
|
220
|
+
/imglist[0] = document.getElementById("img_gif");*/
|
|
221
|
+
imglist[1] = document.getElementById("img_png");
|
|
222
|
+
imglist[2] = document.getElementById("img_jpg");
|
|
223
|
+
|
|
224
|
+
// キャンバスに画像を描画 ←(エラーが起きる部分)
|
|
225
|
+
imglist[0].onload = function() {
|
|
226
|
+
ctx.drawImage(imglist[0],0,max_height);
|
|
227
|
+
max_height += imglist[0].height+30;
|
|
228
|
+
};
|
|
229
|
+
|
|
230
|
+
// キャンバスに画像を描画
|
|
231
|
+
imglist[1].onload = function() {
|
|
232
|
+
ctx.drawImage(imglist[1],0,max_height);
|
|
233
|
+
max_height += imglist[1].height+30;
|
|
234
|
+
};
|
|
235
|
+
|
|
236
|
+
// キャンバスに画像を描画
|
|
237
|
+
imglist[2].onload = function() {
|
|
238
|
+
ctx.drawImage(imglist[2],0,max_height);
|
|
239
|
+
max_height += imglist[2].height+30;
|
|
240
|
+
};
|
|
241
|
+
|
|
242
|
+
|
|
243
|
+
|
|
151
244
|
</SCRIPT>
|
|
152
245
|
|
|
153
246
|
|
|
154
247
|
|
|
155
248
|
</body>
|
|
156
249
|
</html>
|
|
157
|
-
|
|
250
|
+
|
|
158
251
|
```
|
1
回答で指摘されたソースコード一部
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
<title>着せ替え</title>
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
<script src="html2canvas.js"></script>
|
|
24
24
|
|
|
25
25
|
</head>
|
|
26
26
|
<body>
|