質問編集履歴
1
コードにコメントを追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -38,8 +38,16 @@
|
|
|
38
38
|
|
|
39
39
|
//入力は問題ないため、<input>タグは割愛させていただく。
|
|
40
40
|
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
//noResizeImgはちゃんとプレビュー表示される
|
|
44
|
+
|
|
41
45
|
<img class="previewImage" :src="noResizeImg"/>
|
|
42
46
|
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
//このresizeImgが表示されない
|
|
50
|
+
|
|
43
51
|
<img class="previewImage" :src="resizeImg"/>
|
|
44
52
|
|
|
45
53
|
</template>
|
|
@@ -52,13 +60,17 @@
|
|
|
52
60
|
|
|
53
61
|
setAndResizeImg(event){
|
|
54
62
|
|
|
63
|
+
|
|
64
|
+
|
|
55
|
-
|
|
65
|
+
//① 画像ファイルをfileに入れる
|
|
56
|
-
|
|
66
|
+
|
|
57
|
-
const file =
|
|
67
|
+
const file = event.target.files[0];
|
|
58
|
-
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
59
|
-
|
|
71
|
+
//② ちゃんと入っているかを確認するため、リサイズなしで表示する
|
|
60
|
-
|
|
72
|
+
|
|
61
|
-
this.noResizeImg = window.URL.createObjectURL(file);
|
|
73
|
+
this.noResizeImg = window.URL.createObjectURL(file);
|
|
62
74
|
|
|
63
75
|
|
|
64
76
|
|
|
@@ -66,7 +78,9 @@
|
|
|
66
78
|
|
|
67
79
|
if (file.type.startsWith("image/")){
|
|
68
80
|
|
|
81
|
+
|
|
82
|
+
|
|
69
|
-
|
|
83
|
+
//③ imgとreaderをそれぞれ用意する
|
|
70
84
|
|
|
71
85
|
const img = new Image();
|
|
72
86
|
|
|
@@ -74,50 +88,74 @@
|
|
|
74
88
|
|
|
75
89
|
|
|
76
90
|
|
|
77
|
-
//i
|
|
91
|
+
//④ fileを、readerにいれる。
|
|
78
92
|
|
|
79
93
|
reader.readAsDataURL(file);
|
|
80
94
|
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
//⑤ リサイズしたfileを読み込み直す処理？ → reader.onload
|
|
98
|
+
|
|
81
99
|
reader.onload = (event) => {
|
|
82
100
|
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
//⑥ img.srcにfileをいれる
|
|
104
|
+
|
|
83
105
|
img.src = event.target.result;
|
|
84
106
|
|
|
85
107
|
img.onload = () => {
|
|
86
108
|
|
|
87
109
|
|
|
88
110
|
|
|
89
|
-
//幅が、マックス幅よりも小さい時、そのまま入れる。
|
|
111
|
+
//⑦-① 幅が、マックス幅よりも小さい時、そのまま入れる。
|
|
90
112
|
|
|
91
113
|
if(img.width < this.maxWidth){
|
|
92
114
|
|
|
115
|
+
|
|
116
|
+
|
|
93
|
-
|
|
117
|
+
//この分岐を通ったら、ちゃんと<img:src="resizeImg">に表示される
|
|
94
118
|
|
|
95
119
|
this.resizeImg = img.src;
|
|
96
120
|
|
|
121
|
+
|
|
122
|
+
|
|
97
|
-
|
|
123
|
+
}else{
|
|
98
|
-
|
|
124
|
+
|
|
99
|
-
|
|
125
|
+
//⑦-② 幅が、マックス幅よりも大きい時リサイズする。
|
|
100
|
-
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
101
|
-
|
|
129
|
+
//////この分岐のとき、プレビュー表示されなくなる。
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
102
|
-
|
|
133
|
+
//⑧ リサイズ処理
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
103
|
-
//
|
|
137
|
+
//⑧-① キャンバスをつくる(Nuxtでは作れているか？)
|
|
104
|
-
|
|
105
|
-
|
|
106
138
|
|
|
107
139
|
const canvas = document.createElement('canvas');
|
|
108
140
|
|
|
109
141
|
const ctx = canvas.getContext('2d');
|
|
110
142
|
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
//⑧-② 必要な変数宣言
|
|
146
|
+
|
|
111
147
|
let ratio = 0;
|
|
112
148
|
|
|
113
149
|
let width = 0;
|
|
114
150
|
|
|
115
151
|
let height = 0;
|
|
116
152
|
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
//⑧-③ ヨコ長の画像
|
|
156
|
+
|
|
117
157
|
if(img.width > img.height){
|
|
118
158
|
|
|
119
|
-
// ヨコ長の画像
|
|
120
|
-
|
|
121
159
|
ratio = img.height / img.width;
|
|
122
160
|
|
|
123
161
|
width = this.maxWidth;
|
|
@@ -126,7 +164,9 @@
|
|
|
126
164
|
|
|
127
165
|
} else {
|
|
128
166
|
|
|
167
|
+
|
|
168
|
+
|
|
129
|
-
|
|
169
|
+
//⑧-④ タテ長の画像
|
|
130
170
|
|
|
131
171
|
ratio = img.width / img.height;
|
|
132
172
|
|
|
@@ -136,21 +176,25 @@
|
|
|
136
176
|
|
|
137
177
|
}
|
|
138
178
|
|
|
139
|
-
|
|
179
|
+
//⑧-⑤ リサイズ後の大きさを、キャンバスの大きさにセット。
|
|
140
180
|
|
|
141
181
|
canvas.width = width;
|
|
142
182
|
|
|
143
183
|
canvas.height = height;
|
|
144
184
|
|
|
145
|
-
//キャンバスにリサイズ画像を描く
|
|
146
|
-
|
|
147
185
|
|
|
148
186
|
|
|
187
|
+
//⑧-⑥ キャンバスにリサイズ画像を描く
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
149
191
|
ctx.drawImage(image,0,0,image.width,
|
|
150
192
|
|
|
151
193
|
image.height,0,0,width,height);
|
|
152
194
|
|
|
195
|
+
|
|
196
|
+
|
|
153
|
-
|
|
197
|
+
//⑨ リサイズ画像を入れる〜終了〜 これが表示されない
|
|
154
198
|
|
|
155
199
|
this.resizeImg = canvas.toDataURL('image.jpg');
|
|
156
200
|
|