JavaScript를 사용하여 이미지의 너비와 높이를 어떻게 얻을 수 있습니까?

JavaScript로 이미지 크기 검색

웹 페이지에서 이미지의 크기를 결정하는 방법이 필요합니까? JavaScript는 이 작업에 대한 간단한 솔루션을 제공합니다.

이미지 크기 가져오기

프로그래밍 방식으로 이미지 크기를 얻으려면 다음 JavaScript 코드를 활용하세요.

const img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

이 스니펫에서는 새 이미지 개체가 생성됩니다. onload 이벤트 리스너는 이미지 로드가 완료되면 이미지를 처리하도록 할당됩니다. 그런 다음 리스너는 이미지의 크기를 나타내는 이미지 객체의 너비 및 높이 속성을 검색합니다.

DOM 이미지의 경우

DOM에 이미 존재하는 이미지의 경우 , 너비와 높이에 직접 액세스할 수 있습니다. 속성:

const img = document.getElementById('my-image');
alert(img.offsetWidth + 'x' + img.offsetHeight);

고려 사항

이 접근 방식에서는 크기를 검색하기 전에 이미지를 로드해야 한다는 점을 명심하세요. 동적으로 로드되거나 즉시 표시되지 않는 이미지의 경우 해당 속성에 액세스하기 전에 이미지가 완전히 로드되었는지 확인해야 할 수 있습니다.

위 내용은 JavaScript를 사용하여 이미지의 너비와 높이를 어떻게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!