JavaScript로 이미지 파일 크기와 크기를 결정하는 방법은 무엇입니까?

JavaScript를 통해 이미지 파일 크기 및 크기 결정

이 기사에서는 파일 크기(KB)와 크기를 결정하는 방법을 살펴보겠습니다. JavaScript를 사용하여 브라우저 컨텍스트 내에서 직접 이미지 해상도를 생성합니다. 이 정보는 웹페이지에 표시하거나 다양한 작업을 수행하는 데 유용할 수 있습니다.

픽셀 크기 검색

이미지 요소의 현재 픽셀 크기를 얻으려면 테두리와 여백을 제외한 브라우저는 clientWidth를 활용하고 clientHeight 속성.

파일 크기 검색

서버 호스팅 파일의 크기를 가져오는 것은 Ajax HEAD HTTP 요청을 통해 얻을 수 있습니다. 이 방법은 파일 콘텐츠를 전송하지 않고 HTTP 헤더를 검색합니다. Content-Length 헤더는 파일 크기를 바이트 단위로 제공합니다.

참고: 이 접근 방식에는 요청을 동일한 도메인으로 제한하는 동일 출처 정책이 적용됩니다.

원본 이미지 크기 검색

이미지의 원래 크기를 확인하려면 HTML 이미지를 생성하세요. 요소를 동적으로. 이미지가 로드된 후 너비 및 높이 속성에 액세스하도록 onload 이벤트를 설정합니다.

코드 예:

• 픽셀 크기:

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

• HEAD 요청을 사용한 파일 크기:

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

• 원본 이미지 크기:

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