이미지를 입력에서 업로드 크기로 조정

Question

나는 몇 시간 동안이 문제로 고생했습니다. 에서 이미지를 크기를 조정하고 서버에 업로드하고 싶습니다. 여기 내 시도입니다.

내 입력 요소 :

<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); 
}