JavaScript를 사용하여 이미지 파일 크기와 크기를 얻는 방법은 무엇입니까?

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

질문:

어떻게 할 수 있나요? 크로스 브라우저 호환 방식으로 JavaScript만 사용하여 웹 페이지에 렌더링된 이미지의 파일 크기(KB)와 해상도를 결정합니까?

답변:

픽셀 크기 가져오기:

테두리와 여백을 제외하고 이미지 요소의 현재 브라우저 내 픽셀 크기를 검색하려면 다음 JavaScript를 사용하세요.

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

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

파일 크기 검색:

• 옵션 1: HEAD HTTP 요청(권장)

HEAD를 호스팅하는 서버에 요청합니다. XMLHttpRequest를 사용하는 이미지. HTTP 응답의 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);

• 옵션 2: 요소 파일 크기 속성(IE에만 해당)

이 방법은 Internet Explorer에만 적용 가능합니다.

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

원본 이미지 크기 가져오기:

프로그래밍 방식으로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!