[javascript] 이미지 크기(width, height), 이미지 원본 파일의 크기(naturalWidth, naturalHeight)

javascript 이미지의 크기는 width, height 와 이미지 원본 파일의 실제 크기 naturalWidth, naturalHeight 가 있습니다.

( 제가 올리는 javascript 정보는 jQuery를 기본적으로 사용합니다. )

이미지의 사이즈는 width, height 값을 기본적으로 사용하는데, 이 width, height 값은 화면상에 보이는 크기입니다.

이미지 원본 파일의 실제 크기를 구할때는 naturalWidth, naturalHeight 를 사용합니다.

아래 예제 코드를 보시죠.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
  function myinfo(obj){
    $("#myimgwidth").text(obj.width);
    $("#myimgheight").text(obj.height);
    $("#myimgnaturalWidth").text(obj.naturalWidth);
    $("#myimgnaturalHeight").text(obj.naturalHeight);
  }
</script>
<img id="myimg" src="https://t1.daumcdn.net/cfile/tistory/2647BA3456F3F6C32D" width="850" border="0" onload="javascript:myinfo(this);">
<div style="padding:10px">
img width : <span id="myimgwidth"></span><br />
img height : <span id="myimgheight"></span><br />
img naturalWidth : <span id="myimgnaturalWidth"></span><br />
img naturalHeight : <span id="myimgnaturalHeight"></span>
</div>

아래와 같이 출력됩니다.

img width :
img height :
img naturalWidth :
img naturalHeight :