如何使用 JavaScript 取得圖像檔案大小和尺寸？

透過JavaScript 決定圖片的檔案大小和尺寸

問題：

問題：

你怎麼能僅使用JavaScript 以跨瀏覽器相容的方式確定網頁上呈現的圖像的檔案大小（以KB為單位）和解析度？

答案：

取得像素尺寸：

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

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

要擷取影像元素的目前瀏覽器像素大小（不包含邊框和邊距），請使用下列JavaScript：

• 擷取檔案大小：

選項1：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);

• 向託管該檔案的伺服器發出HEAD 請求使用XMLHttpRequest 的映像。 HTTP 回應中的 Content-Length 標頭包含檔案大小（以位元組為單位）。

選項 2：元素檔案大小屬性（僅限 IE）

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

此方法僅適用於 Internet探險家：

取得原始圖片尺寸：

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

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

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

以程式設計方式建立 IMG 元素並使用其 onload 事件擷取原始影像尺寸：

以上是如何使用 JavaScript 取得圖像檔案大小和尺寸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！