[Javascript] 자바스크립트(JS) Image 크기값 알아보기

 

 

자바스크립트(Javascript)의 Image 사이즈 구하기

자바스크립트(Javascript)로 Image 사이즈를 확인하는 방법입니다. 제일 먼저 input 태그로 Image 파일을 첨부하고 Image 파일의 값의 사이즈를 알아보도록 하겠습니다.

 

// Image 업로드후 이미지 크기 확인하기
<input type="file" name="imgFile" id="imgFile" onchange="imgUpload(this.value)" >


 
<script>
function imgUpload(val)
{
    //이미지 확인
    alert(val);    
    
    let img = new Image();
    img.src = val;
    
    let width = img.width;    
    let height = img.height;
 
    alert("width : " + width + " | height : " + height);
}
</script>

 

참고로 clientWidth와 clientHeigt는 border와 스크롤바의 크기는 제외되는 값으로 실제 보이는 대상이 차지하는 공간의 값을 확인하게 됩니다.