如何獲取IMG html屬性中圖像的大小

我看到了這段代碼，以獲得圖像的大小(KB, MB)。但是這段代碼在更改後從按鈕獲取數據。這個代碼可以適用於我的問題嗎？或者有沒有其他方法可以直接使用JavaScript獲取圖像的大小？如何獲取IMG html屬性中圖像的大小

$(function() { 
 
    $("#btnClick").change(function (e){ 
 
     var a = e.target.files[0]; 
 
     alert(parseFloat(a.size/1024).toFixed(2) + " KB."); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" id ="btnClick"/>

編輯作爲nnnnn說。我有一個IMG (eg. < img src="someimg.jpg">)我想得到這張照片的大小。我如何得到它？正如我上面的例子，它將大小存儲在按鈕中並檢索它。

來源

2017-05-08 KiRa

您能否更詳細地闡述您的問題？目前沒有任何意義。 :)你想顯示已經加載到''標籤的圖像的大小嗎？ – CodeMonkey

你是說你有''，你想得到*那個圖片文件的大小？ – nnnnnn

@nnnnnn是的，你完全正確。 – KiRa

有從<img>元素沒有直接的方法來得到它已加載數據的任何信息，除非獲得其naturalWidth和naturalHeight值，當然，如果是由瀏覽器所支持的有效圖像類型之一。

那麼唯一的方法就是以Blob的形式再次獲取數據。從那裏，你將能夠看到文件的大小。但請注意，此方法受限於同源策略。

img.onload = e => { 
 
    fetch(img.src).then(resp => resp.blob()) 
 
    .then(blob => { 
 
    console.log(blob.size); 
 
    }); 
 
    };

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/John_William_Waterhouse_A_Mermaid.jpg/800px-John_William_Waterhouse_A_Mermaid.jpg" id="img">

來源

2017-05-08 03:25:24 Kaiido

我該如何使用此代碼？我需要把它放在一個函數中？.. – KiRa

@KiRa，這取決於你。在這裏，我正在等待映像加載了資源，以便提取使用HTTP緩存而不是向服務器發出新的請求，但是你可以按照你的意願去做，你甚至可以首先獲取這些數據，並將''的'src'設置爲'URL.createObjectURL（blob）'。 – Kaiido

在這裏演示了@ Kaiido的答案。請記住，這不受「交叉來源」的支持XMLHttpRequest'類型。它需要從服務器端被允許。爲[Fiddle]（https://jsfiddle.net/dsLL49rg/2/）。看控制檯的結果。 :) – CodeMonkey

-1

您可以使用該功能通過鏈接直接得到任何文件的文件大小：

function get_filesize(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open("HEAD", url, true); // Notice "HEAD" instead of "GET", 
          // to get only the header 
    xhr.onreadystatechange = function() { 
    if (this.readyState == this.DONE) { 
     callback(parseInt(xhr.getResponseHeader("Content-Length"))); 
    } 
}; 
    xhr.send(); 
}

和使用方法如下：

get_filesize("https://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg", function(size) { 
    alert("The size of image is: " + size + " bytes."); 
});

試試這裏： https://jsfiddle.net/emilvr/mv5r6xxm/

來源

2017-05-08 03:30:12

而不是給負面率，去做一些研究！這個函數返回正確的大小！對於我們有兩種不同尺寸的文件：尺寸＆磁盤尺寸。這個函數返回磁盤上的大小！閱讀更多信息：http://www.fixedbyvonnie.com/2014/08/whats-difference-file-size-size-disk/#.WQ_rj1WGPIU –

如何獲取IMG html屬性中圖像的大小

回答

相關問題