teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問canvasで回転されない

編集履歴

質問編集履歴

7

syuusei

2019/10/02 21:28

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -10,33 +10,15 @@
10
10
 
11
11
  ```javascript
12
12
 
13
- let loadImage= function(src) {
13
+ let promiselist= [];
14
14
 
15
- return new Promise((resolve, reject) => {
15
+ promiselist.push(loadImage("gazou1.png"));
16
16
 
17
- const img = new Image();
17
+ promiselist.push(loadImage("gazou2.png"));
18
18
 
19
- img.onload = () => resolve(img);
20
-
21
- img.onerror = (e) => reject(e);
22
-
23
- img.src = src;
24
-
25
- });
26
-
27
- }
28
-
29
- let imageList = [];
30
-
31
- imageList.push(loadImage("gazou1.png"));
32
-
33
- imageList.push(loadImage("gazou2.png"));
34
-
35
- Promise.all(imageList)
19
+ Promise.all(promiselist)
36
20
 
37
21
  .then( function ( img ) {
38
-
39
- console.log( img ) ;
40
22
 
41
23
  let canvas = document.createElement('canvas');
42
24
 

6

修正

2019/10/02 21:28

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -28,9 +28,9 @@
28
28
 
29
29
  let imageList = [];
30
30
 
31
- imageList.push(loadImage("2500x7500.png"));
31
+ imageList.push(loadImage("gazou1.png"));
32
32
 
33
- imageList.push(loadImage("2500x7500.png"));
33
+ imageList.push(loadImage("gazou2.png"));
34
34
 
35
35
  Promise.all(imageList)
36
36
 
@@ -42,23 +42,13 @@
42
42
 
43
43
  let context= canvas.getContext('2d');
44
44
 
45
- canvas.width = 2500*2;
45
+ canvas.width = img[0].width + img[1].width;
46
46
 
47
- canvas.height = 7500;
47
+ canvas.height = img[0].height;
48
48
 
49
49
  context.drawImage(img[0], 0, 0);
50
50
 
51
51
  context.drawImage(img[1], img[1].width, 0);
52
-
53
-
54
-
55
- // ◆回転◆
56
-
57
- context.translate(canvas.width/2, canvas.height/2);
58
-
59
- context.rotate(90 * Math.PI / 180);
60
-
61
- context.translate(-canvas.width/2, -canvas.height/2);
62
52
 
63
53
 
64
54
 
@@ -72,13 +62,7 @@
72
62
 
73
63
 
74
64
 
75
- } )
76
-
77
- .catch( function ( reason ) {
78
-
79
- console.log( reason ) ;
80
-
81
- } ) ;
65
+ } );
82
66
 
83
67
 
84
68
 

5

修正

2019/10/02 15:44

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -58,6 +58,8 @@
58
58
 
59
59
  context.rotate(90 * Math.PI / 180);
60
60
 
61
+ context.translate(-canvas.width/2, -canvas.height/2);
62
+
61
63
 
62
64
 
63
65
  let a = document.createElement('a');

4

修正

2019/10/02 12:50

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- canvasで回転ができない
1
+ canvasで回転されない
test CHANGED
File without changes

3

修正

2019/10/02 12:26

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ２つの画像を連結させて９０度に回転した画像を保存したいのですが、
1
+ canvasを使用して、2つの画像を連結させて90度に回転した画像を保存したいのですが、
2
2
 
3
3
  保存した画像が回転されていません。
4
4
 

2

修正

2019/10/02 12:25

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,10 @@
1
- 書いてる途中で投稿してしまいした、少しお待ちください。
1
+ ２つの画像を連結させて９０度に回転した画像を保存したいのですが、
2
+
3
+ 保存した画像が回転されていません。
4
+
5
+ どうすれば回転した画像を保存できるのでしょうか？
6
+
7
+
2
8
 
3
9
 
4
10
 
@@ -54,8 +60,6 @@
54
60
 
55
61
 
56
62
 
57
-
58
-
59
63
  let a = document.createElement('a');
60
64
 
61
65
  a.href = canvas.toDataURL('image/png');

1

修正

2019/10/02 12:24

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,7 @@
1
+ 書いてる途中で投稿してしまいした、少しお待ちください。
2
+
3
+
4
+
1
5
  ```javascript
2
6
 
3
7
  let loadImage= function(src) {