[Javascript] img tag의 원본 크기

 

javascript를 사용하여 img tag의 원본크기를 알아올 필요가 있을 경우가 있다.

최근에 jQuery-rwdImageMaps 라는 오픈소스를 사용하고 있었는데 아이폰의 사파리와 크롬 브라우저에서 동작하지 않는 오류가 발견되었다. 

디버깅 해본 결과 img tag의 소스 url을 복사하여 새로운 img 태그를 생성하여 img element의 width를 가져오는 구조로 되어있었는데, 2017년 9월 25일 최근 업데이트된 os를 사용중인 아이폰의 사파리, 크롬 두 브라우저 모두 위의 방법으로 width, height를 모두 가져오지 못했다. 

생성된 img tag의 소스 이미지가 이미 로드된 상태인데도 다시 로드하려 하는 부분에서 이미지 로드가 길어지면서 해당 속성값을 가져오지 못하여 이후 coords 값을 재계산 하는 로직에서 구멍이 나 있는 상태였다.

해결방법으로는 img tag에 onload 이벤트를 사용하여 이미지의 크기를 가져올수도 있지만, html5를 지원하는 브라우저라면 img의 naturalWidth, naturalHeight 를 사용하여 원본 크기를 가져올수도 있다. 하단의 링크에서 지원하는 브라우저와 내용에 대해 자세하게 나온다. 

www.w3schools.com : Image naturalWidth Property

위에서 얘기한 두가지 방법에 대해 간략한 예시 코드는 아래를 참고.

  

image property - naturalWidth, naturalHeight

var img = document.getElementById("img_tag_id");
var width = img..naturalWidth;
var height = img..naturalHeight;
// jQuery
width = $('#img_tag_id').prop('naturalWidth');
height = $('#img_tag_id').prop('naturalHeight');

  

image onLoad event

$('#img_tag_id').load(function(){
    var width = this.width;
    var height = this.height;
});