[ 자바스크립트 ] 이미지의 원래 크기 알아내기

일반적으로, 이미지를 넣을 때, 그 크기를 줄여서 넣어줄 때가 많다.
하지만 가끔은, 그 이미지의 원래 크기를 알아야 할 때가 있다.

최신 브라우저에서는,
간단하게 naturalWidth와 naturalHeight를 이용하면 되지만...
여전히 우리의 속을 썩이는, 익스플로러 8 이하 버전에서는
"naturalWidth"와 "naturalHeight"를 사용할 수가 없다.
따라서, 다른 방법을 이용해야 한다.

아래는 자바스크립트의 new Image()를 이용한 방법이다.

<script type="text/javascript">
function getOriginalSize ( imgTag ){ 
        if ( imgTag == null || imgTag.tagName !== "IMG" ){ // <img> 태그가 아닐 경우.
                return { width: undefined, height: undefined }; 
        } 

        var width = 0, height = 0; 
        if ( "naturalWidth" in imgTag ){ 
                width = imgTag.naturalWidth; 
                height = imgTag.naturalHeight; 
        } 
        else { 
                var newImg = new Image(); 
                newImg.src = imgTag.src; 
                width = newImg.width; 
                height = newImg.height; 
        } 
        return { width: width, height: height }; 
} 
</script>

---

 
<img id="myImg" src="snoopy.png" alt="우드스탁을 안고 있는 스누피" width="64" height="64" /> <br />

<button onclick="testing()"> 클릭하세요 </button>

<p id="width"> </p>
<p id="height"> </p>

<p id="originalWidth"> </p>
<p id="originalHeight"> </p>


<script type="text/javascript">

function testing (){ 

        var img = document.getElementById( "myImg" ); 

        document.getElementById( "width" ).innerHTML = img.width; 
        document.getElementById( "height" ).innerHTML = img.height; 

        var originalSize = getOriginalSize( img ); 

        document.getElementById( "originalWidth" ).innerHTML = originalSize.width; 
        document.getElementById( "originalHeight" ).innerHTML = originalSize.height; 
} 

</script>
 

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*