Nuxt.js で画像をリサイズしてblobでプレビュー表示しようとしたところ、画像が表示されませんでした。

前提・実現したいこと

現在、Nuxt.js を用いて、画像をアップロード・表示するだけのアプリを作成しています。
そこで、

①画像の選択
②画像のアップロード
③画像の表示
④画像の削除

これらの機能は実装できたのですが、画像がデカすぎでキモいのでリサイズ機能を実装したところ、肝心の画像が表示されなくなってしまいましたので、解決したいです。

発生している問題・エラーメッセージ

○画像をリサイズしてアップロード・表示できない。

該当のソースコード

components
1<template>
2  <div class="resize-img">
3    <!-- 画像選択 -->
4    <div v-show="!resizedImg" class="resize-img__post">
5      <label for="file" class="resize-img__post__label">
6        <input
7          id="file"
8          ref="fileInput"
9          type="file"
10          @change="uploadImg"
11        >
12      </label>
13    </div>
14    <!-- プレビュー -->
15    <div v-show="resizedImg" class="resize-img__preview">
16      <div class="resize-img__preview__circle" @click="clearUploadImg">
17        <span class="resize-img__preview__circle__close-icon">x</span>
18      </div>
19      <canvas ref="canvas" class="resize-img__preview__canvas" />
20    </div>
21  </div>
22  <!-- <div class="contents">
23    <label v-show="!uploadedImage" class="input-item__label">
24      <input type="file" @change="onFileChange">
25    </label>
26    <div class="preview-item">
27      <img v-show="uploadedImage" class="preview-item-file" :src="uploadedImage" alt="">
28      <div v-show="uploadedImage" class="preview-item-btn" @click="remove">
29        <e-icon class="preview-item-icon">
30          close
31        </e-icon>
32      </div>
33    </div>
34  </div> -->
35</template>
36
37<script>
38export default {
39  data () {
40    return {
41      resizedImg: null
42    }
43  },
44  destroyed () {
45    this.clearUploadImg()
46  },
47  methods: {
48    uploadImg (e) {
49      const file = e.target.files[0]
50      const reader = new FileReader()
51      reader.onload = (e) => {
52        this.generateImgUrl(e.target.result)
53      }
54      reader.readAsDataURL(file)
55    },
56    generateImgUrl (file) {
57      const image = new Image()
58      image.crossOrigin = 'Annonymous'
59
60      image.onload = (e) => {
61        const resizedBase64 = this.makeResizeImg(image)
62        // リサイズ済みのBase64をblobに変換
63        const resizedBlob = this.base64ToBlob(resizedBase64)
64        // urlを生成してプレビュー表示できるようにする
65        const resizedImg = window.URL.createObjectURL(resizedBlob)
66        this.resizdeImg = resizedImg
67      }
68      image.src = file
69    },
70    makeResizeImg (image) {
71      const canvas = this.$refs.canvas
72      const ctx = canvas.getContext('2d') // 2Dコンテキスト
73      // 縦横で長い方の最大値を1000とする
74      const MAX_SIZE = 1000
75
76      // MAX_SIZEよりも小さかったらそのまま
77      if (image.width < MAX_SIZE && image.height < MAX_SIZE) {
78        [canvas.width, canvas.height] = [image.width, image.height]
79        ctx.drawImage(image, 0, 0)
80        return canvas.toDataURL('image/jpeg')
81      }
82
83      let dstWidth
84      let dstHeight
85      // 縦横比の計算
86      if (image.width > image.height) {
87        dstWidth = MAX_SIZE
88        dstHeight = (image.height * MAX_SIZE) / image.width
89      } else {
90        dstHeight = MAX_SIZE
91        dstWidth = (image.width * MAX_SIZE) / image.height
92      }
93      canvas.width = dstWidth
94      canvas.height = dstHeight
95      // リサイズ
96      ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, dstWidth, dstHeight)
97
98      // data_url形式に変換したものを返す
99      return canvas.toDataURL('image/jpeg')
100    },
101    clearUploadImg () {
102      this.resizedImg = null
103      if (this.$resf.fileInput && this.$refs.fileInput.value !== undefined) {
104        this.$refs.fileInput.value = ''
105      }
106    },
107    base64ToBlob (base64) {
108      const bin = atob(base64.replace(/^.*,/, ''))
109      const buffer = new Uint8Array(bin.length)
110      for (let i = 0; i < bin.length; i++) {
111        buffer[i] = bin.charCodeAt(i)
112      }
113      return new Blob([buffer.buffer], {
114        type: 'image/png'
115      })
116    }
117  }
118}
119// export default {
120//   data () {
121//     return {
122//       uploadedImage: ''
123//     }
124//   },
125//   methods: {
126//     onFileChange (e) {
127//       const files = e.target.files || e.dataTransfer.files
128//       this.createImage(files[0])
129//     },
130//     // アップロードした画像を表示
131//     createImage (file) {
132//       const reader = new FileReader()
133//       reader.onload = (e) => {
134//         this.uploadedImage = e.target.result
135//       }
136//       reader.readAsDataURL(file)
137//     },
138//     remove () {
139//       this.uploadedImage = false
140//     }
141//   }
142// }
143</script>
144
145<style>
146/*.resize-img {
147  width: 100px;
148  height: 100px;
149  margin: 0 auto;
150  margin-top: 20px;
151
152  &__post {
153    border: 1px solid rgba(#000, 0.16);
154    line-height: 30rem;
155
156    &__label {
157      display: inline-block;
158      width: 100%;
159      color: rgba(0, 0, 0, 0.4);
160      text-align: center;
161
162      & > input {
163        display: none;
164      }
165    }
166  }
167
168  &__preview {
169    width: 100px;
170    height: 100px;
171
172    &__circle {
173      position: absolute;
174      right: 37px;
175      width: 27px;
176      height: 27px;
177      margin: 5px;
178      padding: 2px 9px;
179      border-radius: 50%;
180      background-color: rgba(0, 0, 0, 0.3);
181
182      &__close-icon {
183        color: #fff;
184      }
185    }
186
187    &__canvas {
188      width: 100%;
189      height: 100%;
190      object-fit: cover;
191    }
192  }
193}*/
194</style>
195

pages
1<template>
2  <div>
3    <Upload />
4  </div>
5</template>
6
7<script>
8import Upload from '~/components/Upload.vue'
9
10export default {
11  components: {
12    Upload
13  }
14}
15</script>
16

試したこと

以下のサイトを写経してみましたが、肝心の画像が表示されませんでした。

画像をリサイズしてblobでプレビュー表示する方法[Vue/Canvas]

補足情報（FW/ツールのバージョンなど）

packagejson
1{
2  "name": "",
3  "version": "1.0.0",
4  "description": "My epic Nuxt.js project",
5  "author": "",
6  "private": true,
7  "scripts": {
8    "dev": "nuxt",
9    "build": "nuxt build",
10    "start": "nuxt start",
11    "generate": "nuxt generate",
12    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
13  },
14  "dependencies": {
15    "@nuxtjs/axios": "^5.8.0",
16    "chart.js": "^2.9.3",
17    "eslint-plugin-import": "^2.19.1",
18    "firebase": "^7.6.0",
19    "jquery": "3.4.1",
20    "nuxt": "^2.10.2",
21    "vue-chartjs": "^3.5.0",
22    "yarn": "^1.21.1"
23  },
24  "devDependencies": {
25    "@nuxtjs/eslint-config": "^2.0.0",
26    "@nuxtjs/eslint-module": "^1.1.0",
27    "@nuxtjs/vuetify": "^1.9.1",
28    "babel-eslint": "^10.0.3",
29    "eslint": "^6.7.2",
30    "eslint-plugin-nuxt": ">=0.5.0"
31  }
32}
33