[javascript/jquery] filereader 로 업로드된 이미지 가로/세로 구하기

[javascript/jquery] filereader 로 업로드된 이미지 가로/세로 구하기

 

 

javascript 이미지 업로드시 filereader 를 이용하여

 

이미지 객체에 대한 정보를 뽑거나,

 

width / height 정보를 뽑아내야 할때가 있습니다!

 

그럴때 사용하면 되는 샘플 공유해봅니다.

 

아래처럼 일단 filereader 객체로 뽑은 이미지를 담아놓을 

 

보이지 않는 img 태그를 하나 생성합니다.

<img src="" id="id_tmp_img" style="display:none"/>

 

그리고는 파일 업로드 input 에 onchange 를 선언하고,

파일이 선택 될시에 동작하는 함수를 아래처럼 만들어 줍니다.

function get_img_size() {
   var reader = new FileReader();
       reader.onload = function (e) {
           $tmp_img = $('#id_tmp_img').attr('src', e.target.result);
           console.log($tmp_img.width());
           console.log($tmp_img.height());
      };
}

 

위 내용들을 보시면 아마 대충 아실꺼예요~

 

filereader 로 추출한 이미지 src 를 display none 처리되어있는 img 태그에 입력한 뒤

 

그 객체의 width / height 를 console 로 찍은겁니다!

 

참고하세요!