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

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

在本文中，我們將探討如何確定檔案大小（以千位元組為單位）和使用JavaScript 直接在瀏覽器上下文中解析圖像。此資訊對於在網頁上顯示或執行各種操作非常有價值。

擷取像素尺寸

取得影像元素在瀏覽器，不包含其邊框和邊距，使用clientWidth 和clientHeight properties.

檢索檔案大小

取得伺服器代管檔案的大小可以透過 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中文網其他相關文章！