[REACTJS] 입력에서 업로드 할 크기 조정 이미지

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

해결법

1. ---

   1.문제는 당신이 그것의 폭과 높이를 액세스하기 전에 부하에 이미지를 기다리는하지 않는 것입니다.

   문제는 당신이 그것의 폭과 높이를 액세스하기 전에 부하에 이미지를 기다리는하지 않는 것입니다.

   당신이 독자를 기다리고있다, 당신은 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);
   }
   

from https://stackoverflow.com/questions/47396784/resize-image-from-input-to-upload by cc-by-sa and MIT license