JavaScript를 사용하여 이미지의 파일 크기와 크기를 어떻게 확인할 수 있나요?

Javascript를 사용하여 이미지 파일 크기 및 치수 결정

웹 애플리케이션에서는 웹 페이지에 표시되는 이미지에 대한 정보를 검색해야 합니다. 일반적인 요구 사항 중 하나는 브라우저 컨텍스트 내에서 이미지의 파일 크기와 해상도를 완전히 결정하는 것입니다. 이 문서에서는 이 작업을 수행하기 위한 다양한 브라우저 간 기술을 살펴봅니다.

이미지 크기 가져오기

웹 페이지에 표시되는 이미지의 해상도를 결정하려면 다음을 활용할 수 있습니다. 이미지가 포함된 DOM 요소의 clientWidth 및 clientHeight 속성. 이 접근 방식은 테두리나 여백을 제외하고 브라우저 내 이미지의 픽셀 크기를 반환합니다.

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

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

파일 크기 검색

파일 크기를 얻으려면 이미지의 경우 한 가지 옵션은 문서 및 IMG 요소에 대해 Internet Explorer에서 사용할 수 있는 fileSize 속성을 사용하는 것입니다. 그러나 이 접근 방식은 IE로 제한되며 다른 브라우저에서는 지원되지 않습니다.

HEAD HTTP 요청 사용

보다 다양한 기술은 HTTP HEAD 요청을 IE에 보내는 것입니다. 이미지의 URL입니다. HEAD 요청은 콘텐츠를 다운로드하지 않고 리소스에 대한 메타데이터를 검색합니다. 응답 헤더에는 파일 크기(바이트)를 나타내는 Content-Length가 포함됩니다.

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);

참고: Ajax 요청에는 동일 출처 정책이 적용됩니다. 즉, 리소스에만 액세스할 수 있습니다. 웹페이지와 동일한 도메인에서.

원본 이미지 가져오기 크기

크기를 조정하거나 자르기 전에 이미지의 원래 크기를 확인하려면 프로그래밍 방식으로 IMG 요소를 생성하고 해당 크기를 검색하도록 onload 이벤트를 설정하면 됩니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!