質問編集履歴
1
コードにコメントを追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -18,63 +18,85 @@
|
|
|
18
18
|
<template>
|
|
19
19
|
......
|
|
20
20
|
//入力は問題ないため、<input>タグは割愛させていただく。
|
|
21
|
+
|
|
22
|
+
//noResizeImgはちゃんとプレビュー表示される
|
|
21
23
|
<img class="previewImage" :src="noResizeImg"/>
|
|
24
|
+
|
|
25
|
+
//このresizeImgが表示されない
|
|
22
26
|
<img class="previewImage" :src="resizeImg"/>
|
|
23
27
|
</template>
|
|
24
28
|
|
|
25
29
|
<scirpt>
|
|
26
30
|
.....
|
|
27
31
|
setAndResizeImg(event){
|
|
32
|
+
|
|
28
|
-
|
|
33
|
+
//① 画像ファイルをfileに入れる
|
|
29
|
-
|
|
34
|
+
const file = event.target.files[0];
|
|
35
|
+
|
|
30
|
-
|
|
36
|
+
//② ちゃんと入っているかを確認するため、リサイズなしで表示する
|
|
31
|
-
|
|
37
|
+
this.noResizeImg = window.URL.createObjectURL(file);
|
|
32
38
|
|
|
33
39
|
//ここからリサイズ処理に入る
|
|
34
40
|
if (file.type.startsWith("image/")){
|
|
41
|
+
|
|
35
|
-
|
|
42
|
+
//③ imgとreaderをそれぞれ用意する
|
|
36
43
|
const img = new Image();
|
|
37
44
|
const reader = new FileReader();
|
|
38
45
|
|
|
39
|
-
//
|
|
46
|
+
//④ fileを、readerにいれる。
|
|
40
47
|
reader.readAsDataURL(file);
|
|
48
|
+
|
|
49
|
+
//⑤ リサイズしたfileを読み込み直す処理？ → reader.onload
|
|
41
50
|
reader.onload = (event) => {
|
|
51
|
+
|
|
52
|
+
//⑥ img.srcにfileをいれる
|
|
42
53
|
img.src = event.target.result;
|
|
43
54
|
img.onload = () => {
|
|
44
55
|
|
|
45
|
-
//幅が、マックス幅よりも小さい時、そのまま入れる。
|
|
56
|
+
//⑦-① 幅が、マックス幅よりも小さい時、そのまま入れる。
|
|
46
57
|
if(img.width < this.maxWidth){
|
|
58
|
+
|
|
47
|
-
|
|
59
|
+
//この分岐を通ったら、ちゃんと<img:src="resizeImg">に表示される
|
|
48
60
|
this.resizeImg = img.src;
|
|
61
|
+
|
|
62
|
+
}else{
|
|
63
|
+
//⑦-② 幅が、マックス幅よりも大きい時リサイズする。
|
|
49
64
|
|
|
50
|
-
}else{//幅が、マックス幅よりも大きい時リサイズする。
|
|
51
|
-
|
|
65
|
+
//////この分岐のとき、プレビュー表示されなくなる。
|
|
66
|
+
|
|
52
|
-
//
|
|
67
|
+
//⑧ リサイズ処理
|
|
53
68
|
|
|
69
|
+
//⑧-① キャンバスをつくる(Nuxtでは作れているか？)
|
|
54
70
|
const canvas = document.createElement('canvas');
|
|
55
71
|
const ctx = canvas.getContext('2d');
|
|
72
|
+
|
|
73
|
+
//⑧-② 必要な変数宣言
|
|
56
74
|
let ratio = 0;
|
|
57
75
|
let width = 0;
|
|
58
76
|
let height = 0;
|
|
77
|
+
|
|
78
|
+
//⑧-③ ヨコ長の画像
|
|
59
79
|
if(img.width > img.height){
|
|
60
|
-
// ヨコ長の画像
|
|
61
80
|
ratio = img.height / img.width;
|
|
62
81
|
width = this.maxWidth;
|
|
63
82
|
height = this.maxWidth * ratio;
|
|
64
83
|
} else {
|
|
84
|
+
|
|
65
|
-
|
|
85
|
+
//⑧-④ タテ長の画像
|
|
66
86
|
ratio = img.width / img.height;
|
|
67
87
|
width = this.maxHeight * ratio;
|
|
68
88
|
height = this.maxHeight;
|
|
69
89
|
}
|
|
70
|
-
|
|
90
|
+
//⑧-⑤ リサイズ後の大きさを、キャンバスの大きさにセット。
|
|
71
91
|
canvas.width = width;
|
|
72
92
|
canvas.height = height;
|
|
73
|
-
//キャンバスにリサイズ画像を描く
|
|
74
93
|
|
|
94
|
+
//⑧-⑥ キャンバスにリサイズ画像を描く
|
|
95
|
+
|
|
75
96
|
ctx.drawImage(image,0,0,image.width,
|
|
76
97
|
image.height,0,0,width,height);
|
|
98
|
+
|
|
77
|
-
|
|
99
|
+
//⑨ リサイズ画像を入れる〜終了〜 これが表示されない
|
|
78
100
|
this.resizeImg = canvas.toDataURL('image.jpg');
|
|
79
101
|
|
|
80
102
|
}
|