웹 브라우저에서 이미지의 크기와 크기를 어떻게 결정합니까?

브라우저에서 이미지 파일 크기 및 크기 확인

소개

웹 개발 시 브라우저에 표시되는 이미지에 대한 정보를 검색해야 하는 경우가 종종 있습니다. 파일 크기 및 해상도와 같은 웹 페이지. 이 정보는 표시 목적이나 페이지 성능 최적화에 유용할 수 있습니다.

해결책

파일 크기:

1. XMLHttpRequest(HEAD 요청): 이 메소드를 사용하면 호스트된 파일의 크기를 검색할 수 있습니다. 전체 파일을 다운로드하지 않고 서버에 응답에는 파일 크기를 바이트 단위로 지정하는 Content-Length 헤더가 포함됩니다.

   var xhr = new XMLHttpRequest();
   xhr.open('HEAD', 'img/test.jpg', true);
   xhr.onload = function() {
     alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length'));
   };
   xhr.send();

해상도(브라우저 내 픽셀 Dimensions):

1. clientWidth/clientHeight: 이러한 속성은 콘텐츠를 포함하여 DOM 요소의 픽셀 너비와 높이를 반환하지만 테두리와 margin.

   var img = document.getElementById('imageId');
   
   var width = img.clientWidth;
   var height = img.clientHeight;

원래 크기(브라우저 렌더링 전 이미지 크기):

1. 이미지 만들기 프로그래밍 방식으로 요소: DOM에 이미지 요소를 생성하고 해당 소스를 이미지 URL로 설정합니다. 이미지가 로드되면 너비 및 높이 속성에 액세스하여 원래 크기를 얻을 수 있습니다.

   var img = document.createElement('img');
   
   img.onload = function() {
     alert(img.width + ' x ' + img.height);
   };
   
   img.src = 'http://sstatic.net/so/img/logo.png';

참고

• 사용 시 gzip 압축을 고려하세요. Content-Length 방법은 부정확한 파일 크기 정보를 제공할 수 있습니다.
• 동일 출처를 준수하는지 확인하세요. 도메인 간 Ajax 요청 시 정책

위 내용은 웹 브라우저에서 이미지의 크기와 크기를 어떻게 결정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!