브라우저 간 원본 이미지 크기 결정

클라이언트 측에서 크기가 조정된 이미지의 원래 물리적 크기를 결정하는 것은 크로스 브라우저 챌린지. 그러나 이를 달성하기 위한 안정적이고 프레임워크 독립적인 방법이 있습니다.

옵션 1: 동적 이미지 치수 읽기

이미지 HTML에서 사전 정의된 너비 및 높이 속성을 제거합니다. 요소. 시스템은 디스플레이 요구 사항에 맞게 크기를 자동으로 조정합니다. 그런 다음 JavaScript를 활용하여 크기가 조정된 너비와 높이를 나타내는 요소의 offsetWidth 및 offsetHeight 속성에 액세스합니다.

옵션 2: JavaScript 이미지 개체

JavaScript 이미지 개체 만들기 크기가 조정된 이미지의 소스를 src 속성에 할당합니다. 이미지가 로드되면 개체의 너비 및 높이 속성이 원래 크기를 유지합니다. onload 이벤트를 활용하여 이 작업을 비동기적으로 실행할 수 있으며, 크기를 검색하기 전에 이미지가 완전히 로드되었는지 확인할 수 있습니다.

코드 예:

function getImgSize(imgSrc) {
  var newImg = new Image();

  newImg.onload = function() {
    var height = newImg.height;
    var width = newImg.width;
    alert('The image size is '   width   '*'   height);
  };

  newImg.src = imgSrc; // Do this after setting `onload`
}

참고: 큰 이미지가 크기를 반환하지 않는 문제가 발생하는 경우 JavaScript 개체 내에서 onload 이벤트를 사용하는 것이 좋습니다. 이렇게 하면 해당 속성에 액세스하기 전에 이미지가 완전히 로드되었는지 확인할 수 있습니다.