画像を入力からアップロードへサイズ変更

Question

私はこの問題を数時間苦労しました。私はからの画像のサイズを変更し、それをサーバーにアップロードします。ここに私の試みです。

私のinput要素：

<Input type="file" name="file" onChange={this.handleLoadAvatar} /> 

マイhandleLoadAvatar機能：

handleLoadAvatar(e) { 
var file = e.target.files[0]; 
var img = document.createElement("img"); 
var reader = new FileReader(); 
reader.onload = (e) => { 
    img.src = e.target.result; 
} 
reader.readAsDataURL(file); 

var canvas = document.createElement('canvas'); 
var ctx = canvas.getContext("2d"); 
ctx.drawImage(img, 0, 0); 

var MAX_WIDTH = 300; 
var MAX_HEIGHT = 300; 
var width = img.width; // GET STUCK HERE 
var height = img.height; 

if (width > height) { 
    if (width > MAX_WIDTH) { 
    height *= MAX_WIDTH/width; 
    width = MAX_WIDTH; 
    } 
} else { 
    if (height > MAX_HEIGHT) { 
    width *= MAX_HEIGHT/height; 
    height = MAX_HEIGHT; 
    } 
} 
canvas.width = width; 
canvas.height = height; 
var ctx = canvas.getContext("2d"); 
ctx.drawImage(img, 0, 0, width, height); 
var dataurl = canvas.toDataURL("image/png"); 
this.setState({previewSrc: dataurl}); 

}

私は私のプロジェクトのためにReactJSを使用しています。私は画像の幅を得ることができない上記のコメントをつけて行こうとした。私はHTML5 Pre-resize images before uploadingでこの解決策を試みたが、これは私のために動作していないようだ。誰でも私のコードに何が間違っていて、それを修正する方法を指摘できますか？本当にありがとう！

Answer 1

問題は、widthとheightにアクセスする前に画像が読み込まれるのを待っていないことです。あなたがreaderを待っていたよう

は、あなたがimgのために同じことを行う必要があります。

handleLoadAvatar(e) { 
    var file = e.target.files[0]; 
    var reader = new FileReader(); 
    reader.onload = (e) => { 
    var img = document.createElement("img"); 
    img.onload =() => { 
     var canvas = document.createElement('canvas'); 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(img, 0, 0); 

     var MAX_WIDTH = 300; 
     var MAX_HEIGHT = 300; 
     var width = img.width; 
     var height = img.height; 

     if (width > height) { 
     if (width > MAX_WIDTH) { 
      height *= MAX_WIDTH/width; 
      width = MAX_WIDTH; 
     } 
     } else { 
     if (height > MAX_HEIGHT) { 
      width *= MAX_HEIGHT/height; 
      height = MAX_HEIGHT; 
     } 
     } 
     canvas.width = width; 
     canvas.height = height; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(img, 0, 0, width, height); 
     var dataurl = canvas.toDataURL("image/png"); 
     this.setState({previewSrc: dataurl}); 
    } 
    img.src = e.target.result; 
    } 
    reader.readAsDataURL(file); 
}