크로스 브라우저에서 원본 이미지 크기를 결정하는 방법은 무엇입니까?

크로스 브라우저에서 원본 이미지 크기 결정

웹 개발에서는 페이지 성능과 응답성을 최적화하기 위해 클라이언트 측에서 이미지 크기를 조정하는 것이 일반적인 방법입니다. . 그러나 크기가 조정된 이미지의 원래 물리적 크기를 결정하는 것은 브라우저 불일치로 인해 어려울 수 있습니다. 이 문서에서는 이 정보를 얻기 위한 신뢰할 수 있고 프레임워크 독립적인 두 가지 옵션을 살펴봅니다.

옵션 1: OffsetWidth 및 OffsetHeight 사용

이 방법에는 명시적인 너비 및 높이 속성을 제거하는 작업이 포함됩니다. 요소. 그런 다음 offsetWidth 및 offsetHeight 속성에 액세스하여 크기가 조정된 이미지의 실제 너비와 높이를 검색할 수 있습니다. 이 옵션은 간단하며 대부분의 주요 브라우저에서 지원됩니다.

옵션 2: JavaScript 이미지 개체 사용

두 번째 접근 방식은 JavaScript 이미지 개체를 생성하고 src 속성을 설정하는 것입니다. 이미지 소스에 연결하고 너비 및 높이 속성에 액세스합니다. 이 작업을 수행하기 위해 이미지를 페이지에 추가할 필요는 없습니다.

다음은 예제 코드 조각입니다.

<code class="javascript">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; // This must be done after setting onload
}</code>

Pekka에서 편집:

큰 이미지의 정확한 결과를 보장하기 위해 이미지의 onload 이벤트를 사용하여 기능을 트리거할 수 있습니다. 그렇지 않으면 이미지 로딩이 완료되기 전에 높이와 너비를 사용할 수 없습니다.

위 내용은 크로스 브라우저에서 원본 이미지 크기를 결정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!