質問編集履歴
7
syuusei
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,20 +4,11 @@
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
```javascript
|
|
7
|
-
let loadImage= function(src) {
|
|
8
|
-
return new Promise((resolve, reject) => {
|
|
9
|
-
const img = new Image();
|
|
10
|
-
img.onload = () => resolve(img);
|
|
11
|
-
img.onerror = (e) => reject(e);
|
|
12
|
-
img.src = src;
|
|
13
|
-
});
|
|
14
|
-
}
|
|
15
|
-
let
|
|
7
|
+
let promiselist= [];
|
|
16
|
-
|
|
8
|
+
promiselist.push(loadImage("gazou1.png"));
|
|
17
|
-
|
|
9
|
+
promiselist.push(loadImage("gazou2.png"));
|
|
18
|
-
Promise.all(
|
|
10
|
+
Promise.all(promiselist)
|
|
19
11
|
.then( function ( img ) {
|
|
20
|
-
console.log( img ) ;
|
|
21
12
|
let canvas = document.createElement('canvas');
|
|
22
13
|
let context= canvas.getContext('2d');
|
|
23
14
|
canvas.width = img[0].width + img[1].width;
|
6
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -13,32 +13,24 @@
|
|
|
13
13
|
});
|
|
14
14
|
}
|
|
15
15
|
let imageList = [];
|
|
16
|
-
imageList.push(loadImage("
|
|
16
|
+
imageList.push(loadImage("gazou1.png"));
|
|
17
|
-
imageList.push(loadImage("
|
|
17
|
+
imageList.push(loadImage("gazou2.png"));
|
|
18
18
|
Promise.all(imageList)
|
|
19
19
|
.then( function ( img ) {
|
|
20
20
|
console.log( img ) ;
|
|
21
21
|
let canvas = document.createElement('canvas');
|
|
22
22
|
let context= canvas.getContext('2d');
|
|
23
|
-
canvas.width =
|
|
23
|
+
canvas.width = img[0].width + img[1].width;
|
|
24
|
-
canvas.height =
|
|
24
|
+
canvas.height = img[0].height;
|
|
25
25
|
context.drawImage(img[0], 0, 0);
|
|
26
26
|
context.drawImage(img[1], img[1].width, 0);
|
|
27
|
-
|
|
28
|
-
// ◆回転◆
|
|
29
|
-
context.translate(canvas.width/2, canvas.height/2);
|
|
30
|
-
context.rotate(90 * Math.PI / 180);
|
|
31
|
-
context.translate(-canvas.width/2, -canvas.height/2);
|
|
32
27
|
|
|
33
28
|
let a = document.createElement('a');
|
|
34
29
|
a.href = canvas.toDataURL('image/png');
|
|
35
30
|
a.download = 'download.png';
|
|
36
31
|
a.click();
|
|
37
32
|
|
|
38
|
-
} )
|
|
39
|
-
.catch( function ( reason ) {
|
|
40
|
-
console.log( reason ) ;
|
|
41
|
-
} )
|
|
33
|
+
} );
|
|
42
34
|
|
|
43
35
|
|
|
44
36
|
```
|
5
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
// ◆回転◆
|
|
29
29
|
context.translate(canvas.width/2, canvas.height/2);
|
|
30
30
|
context.rotate(90 * Math.PI / 180);
|
|
31
|
+
context.translate(-canvas.width/2, -canvas.height/2);
|
|
31
32
|
|
|
32
33
|
let a = document.createElement('a');
|
|
33
34
|
a.href = canvas.toDataURL('image/png');
|
4
修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
canvasで回転
|
|
1
|
+
canvasで回転されない
|
body
CHANGED
|
File without changes
|
3
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
canvasを使用して、2つの画像を連結させて90度に回転した画像を保存したいのですが、
|
|
2
2
|
保存した画像が回転されていません。
|
|
3
3
|
どうすれば回転した画像を保存できるのでしょうか？
|
|
4
4
|
|
2
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
２つの画像を連結させて９０度に回転した画像を保存したいのですが、
|
|
2
|
+
保存した画像が回転されていません。
|
|
3
|
+
どうすれば回転した画像を保存できるのでしょうか？
|
|
2
4
|
|
|
5
|
+
|
|
3
6
|
```javascript
|
|
4
7
|
let loadImage= function(src) {
|
|
5
8
|
return new Promise((resolve, reject) => {
|
|
@@ -26,7 +29,6 @@
|
|
|
26
29
|
context.translate(canvas.width/2, canvas.height/2);
|
|
27
30
|
context.rotate(90 * Math.PI / 180);
|
|
28
31
|
|
|
29
|
-
|
|
30
32
|
let a = document.createElement('a');
|
|
31
33
|
a.href = canvas.toDataURL('image/png');
|
|
32
34
|
a.download = 'download.png';
|
1
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
書いてる途中で投稿してしまいした、少しお待ちください。
|
|
2
|
+
|
|
1
3
|
```javascript
|
|
2
4
|
let loadImage= function(src) {
|
|
3
5
|
return new Promise((resolve, reject) => {
|