여러 브라우저에서 클라이언트 측 크기가 조정된 이미지의 원래 크기 공개

클라이언트에서 크기가 조정된 이미지의 실제 크기 결정 측면은 많은 웹 개발 시나리오에서 중요한 작업입니다. 반응형 레이아웃을 위해 이미지를 조정하든, 사용자에게 원래 크기를 표시하든, 여러 브라우저에서 일관되게 작동하는 안정적인 솔루션을 찾는 것이 중요합니다.

옵션 1: OffsetWidth 및 OffsetHeight 활용

한 가지 접근 방식은 요소에서 너비 및 높이 속성을 제거하고 해당 offsetWidth 및 offsetHeight를 검색하는 것입니다. 이 기술은 원래 크기를 재정의하는 CSS 스타일의 가능성을 제거합니다.

const img = document.querySelector('img');
img.removeAttribute('width');
img.removeAttribute('height');
const width = img.offsetWidth;
const height = img.offsetHeight;

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

대체 방법은 JavaScript 이미지 개체를 활용하는 것입니다. Image 객체를 생성하고, 이미지 소스를 src 속성에 할당하고, 이미지가 로드된 후 너비 및 높이 속성에 직접 액세스합니다.

const newImg = new Image();
newImg.onload = function() {
  const width = newImg.width;
  const height = newImg.height;
  // Display the dimensions in an alert for demonstration
  alert(`Original image size: ${width}px * ${height}px`);
};
newImg.src = imgSrc; // Important to set after attaching the onload handler

이벤트 처리의 중요성을 기억하세요. 큰 이미지의 경우 onload 이벤트 없이 옵션 2의 접근 방식을 사용하면 코드 실행이 실행될 때 이미지가 아직 로드되지 않았을 수 있으므로 빈 결과가 발생할 수 있습니다.

이러한 브라우저 독립적인 기술을 사용하면 다음을 자신 있게 수행할 수 있습니다. 크기가 조정된 이미지의 실제 크기를 결정하여 향상된 정밀도와 유연성으로 웹 애플리케이션을 강화합니다.