下記のようにアロー関数を用いた書き方をすると
「TypeError: Cannot read properties of undefined (reading '$refs')」
というエラーになります。
javascript
1// canvasの画像をinput type="file"にプレビュー 2 previewImage:() =>{ 3 let file = this.$refs.selectimage.files; //ファイル情報の取得 4 const canvas = this.$refs.preview; //canvasタグ 5 const fileReader = new FileReader(); 6 fileReader.onload = function () { 7 const ctx = canvas.getContext("2d"); 8 const image = new Image(); 9 image.src = fileReader.result; 10 image.onload = function () { 11 canvas.width = image.width; 12 canvas.height = image.height; 13 ctx.drawImage(image, 0, 0); 14 }; 15 }; 16 fileReader.readAsDataURL(file[0]); 17 },
アロー関数を用いる前の以下のコードではエラーも出ず正常に動作していました。
javascript
1 // canvasの画像をinput type="file"にプレビュー 2 previewImage: function () { 3 let file = this.$refs.selectimage.files; //ファイル情報の取得 4 const canvas = this.$refs.preview; //canvasタグ 5 const fileReader = new FileReader(); 6 fileReader.onload = function () { 7 const ctx = canvas.getContext("2d"); 8 const image = new Image(); 9 image.src = fileReader.result; 10 image.onload = function () { 11 canvas.width = image.width; 12 canvas.height = image.height; 13 ctx.drawImage(image, 0, 0); 14 }; 15 }; 16 fileReader.readAsDataURL(file[0]); 17 },
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/03/15 08:03