画像リサイズができない。(canvas)。(Nuxt.js)

やりたいこと

①　canvasを用いて、画像のリサイズをする。

② それをプレビュー表示する。

できないこと

画像リサイズ後の画像が、プレビュー表示されない。

したがって、リサイズできているか分からない。

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