如何使用Javascript獲取網頁上圖像的文件大小？

Question

我希望能夠獲取網頁上圖像的文件大小。

因此，假設我在頁面上有一個圖像（已加載），如下所示：

如何在 Javascript（或者更好的是 jquery）中調用函數來獲取圖像的文件大小（而不是尺寸）？

重要的是要注意，我沒有使用任何輸入或讓用戶上傳圖像，有很多關於使用文件 API 從瀏覽按鈕獲取圖像大小的 SO 答案。

我想要做的就是根據其 id 和 src url 獲取頁面上任意圖像的文件大小。

編輯：我正在處理某些圖像的保持活動連接，因此 Content-Length 標頭不可用。

Answer 1

您無法直接獲取文件大小（或其中的任何數據）。

唯一的方法有點臟，因為您必須執行 XMLHTTPRequest（根據“跨源資源共享”，它可能不適用於外部圖像）。 但是有了瀏覽器的緩存，它不應該引起另一個 HTTP 請求。

var xhr = new XMLHttpRequest();
xhr.open("GET", "foo.png", true);
xhr.responseType = "arraybuffer";
xhr.onreadystatechange = function() {
    if(this.readyState == this.DONE) {
        alert("Image size = " + this.response.byteLength + " bytes.");
    }
};
xhr.send(null);

Answer 2

這是一個對我有用的 React 版本，如果可以節省一些時間，請將其發布。

表單域

<input type="file" 
   name="file"  
   id="file" 
   multiple="multiple" 
   onChange={onChangeHandler} 
   className="fileUp" />

JSX

const onChangeHandler = event => {
    console.log(event.target.files[0].size);
}

Answer 3

老問題，但這是我的看法：我遇到了同樣的問題，但不想依靠緩沖來防止我的應用程序下載圖像兩次（正如接受的答案那樣）。 我最終做的是將文件作為 blob 獲取，讀取文件大小，然后使用 blob 作為圖像源。 這可以通過URL.createObjectURL()函數輕松完成，如下所示：

let img = new Image()
img.crossOrigin = "Anonymous"; // Helps with some cross-origin issues

fetch('foo.png')
.then(response => response.blob())
.then(blob => { img.src = URL.createObjectURL(blob); })

這看起來更干凈，也許它仍然對某些人有用。

Answer 4

假設您可以使用 HTML5

1. 創建畫布
2. 把圖像放在那里
3. 使用.toDataURLHD()獲取圖像數據
4. 抓取 base64 編碼的字符串
5. 使用一些瘋狂的計算來獲得以字節為單位的圖像大小。

玩得開心！

也許使用服務器端腳本要容易得多，所以它不會依賴於 HTML5