如何使用 JavaScript 確定圖像的檔案大小和尺寸？

使用 Javascript 確定圖像檔案大小和尺寸

在 Web 應用程式中，有必要檢索有關網頁上顯示的圖像的資訊。一個常見的要求是完全在瀏覽器上下文中確定圖像的檔案大小和解析度。本文探討了完成此任務的各種跨瀏覽器技術。

取得圖片尺寸

要確定網頁上顯示的圖像的分辨率，您可以使用包含圖像的 DOM 元素的 clientWidth 和 clientHeight 屬性。此方法傳回瀏覽器中影像的像素尺寸，不包括任何邊框或邊距。

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

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

檢索檔案大小

取得某個檔案的檔案大小影像，一種選擇是使用Internet Explorer 中針對文件和IMG 元素提供的fileSize 屬性。不過，這種方法僅限於 IE，其他瀏覽器不支援。

使用 HEAD HTTP 請求

更通用的技術是向映像的網址。 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中文網其他相關文章！