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

크로스 브라우저에서 원본 이미지 크기 검색

클라이언트 측에서 크기가 조정된 이미지의 물리적 크기를 결정하는 것은 다양한 브라우저에서 어려울 수 있습니다. 그러나 신뢰할 수 있고 프레임워크 독립적인 두 가지 옵션을 사용할 수 있습니다.

옵션 1: offsetWidth 및 offsetHeight 사용

이미지 요소에서 너비 및 높이 속성을 제거합니다(< ;img> 태그). 그런 다음 offsetWidth 및 offsetHeight 속성을 사용하여 크기가 조정된 이미지의 실제 너비와 높이를 검색합니다.

<code class="javascript">const img = document.querySelector('img');

img.removeAttribute('width');
img.removeAttribute('height');

const width = img.offsetWidth;
const height = img.offsetHeight;</code>

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

새 JavaScript 이미지 객체의 src 속성을 이미지 URL로 설정한 다음 너비 및 높이 속성을 사용하여 원래 크기를 검색합니다.

<code class="javascript">function getImgSize(imgSrc) {
    const newImg = new Image();

    newImg.onload = function() {
        const width = newImg.width;
        const height = newImg.height;

        // Do something with the dimensions...
    };

    newImg.src = imgSrc;
}</code>

이 옵션에서는 이미지가 반드시 그럴 필요는 없습니다. 로드하고 크기를 결정하려면 페이지에 추가하세요.

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