JavaScript로 이미지 파일 크기와 크기를 어떻게 얻을 수 있나요?

Javascript에서 이미지 파일 크기 및 크기 결정

웹 애플리케이션에서 웹 애플리케이션에서 이미지 파일 크기(kb)와 해상도를 직접 결정 브라우저 컨텍스트는 이 정보를 페이지에 표시하는 등 다양한 목적에 필수적입니다. 이 기사에서는 ActiveX 컨트롤이나 Java 애플릿을 사용하지 않고 이러한 크로스 브라우저 기능을 달성하기 위한 솔루션을 살펴봅니다.

이미지 크기 검색

이미지 요소의 픽셀 크기를 얻으려면 테두리와 여백을 제외하고 브라우저 내에서 clientWidth 및 clientHeight를 활용할 수 있습니다. 속성:

var img = document.getElementById('imageId'); 

var width = img.clientWidth;
var height = img.clientHeight;

파일 크기 결정

안타깝게도 브라우저 API에는 이미지의 파일 크기에 액세스하기 위한 직접적인 지원이 부족합니다. 그러나 해결 방법은 Ajax를 사용하여 HEAD HTTP 요청을 수행하는 것입니다.

var xhr = new XMLHttpRequest();
xhr.open('HEAD', 'img/test.jpg', true);
xhr.onreadystatechange = function(){
  if ( xhr.readyState == 4 ) {
    if ( xhr.status == 200 ) {
      alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length'));
    } else {
      alert('ERROR');
    }
  }
};
xhr.send(null);

참고: 이 방법에는 동일 출처 정책이 적용되어 동일한 도메인 내에서만 요청을 허용합니다.

추가 고려 사항

• 응답이 압축된 경우(예: gzipped) Content-Length 헤더 값이 실제 이미지 크기를 정확하게 반영하지 않을 수 있습니다.
• 이미지를 문서에 완전히 로드하지 않고 원본 이미지 크기를 얻으려면 프로그래밍 방식으로 이미지 요소를 생성하세요. 이미지 소스를 할당합니다:

var img = document.createElement('img');

img.onload = function () { alert(img.width + ' x ' + img.height); };

img.src='http://sstatic.net/so/img/logo.png';

위 내용은 JavaScript로 이미지 파일 크기와 크기를 어떻게 얻을 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!