JavaScript - Uzyskaj rozmiar w bajtach z HTML img src

Question

Chciałbym wiedzieć, jak uzyskać rozmiar w bajtach z "src" z tagu "img" przy pomocy HTML/JS.

<img src="https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif"/> 

W powyższym przykładzie chciałbym przede wszystkim wiedzieć, jak duży jest "testpattern.gif" (w bajtach).

Z góry dziękuję.

Answer 1

Javscript jest czystym skryptem po stronie klienta i jeśli pytasz mnie, czy możemy uzyskać rozmiar obrazu tylko za pomocą javascript, wtedy moja odpowiedź brzmi: "NO". Nawet jeśli uruchomisz pliki lokalnie, nie będziesz mógł uzyskać rozmiaru pliku.

XMLHttpRequest object

var obj = new XMLHttpRequest(); 
obj.open('HEAD', 'image path', true); 
obj.onreadystatechange = function(){ 
    if (obj.readyState == 4) { 
    if (obj.status == 200) { 
     alert('Size in bytes: ' + obj.getResponseHeader('Content-Length')); 
    } else { 
     alert('ERROR'); 
    } 
    } 
}; 
obj.send(null); 

To jest w zasadzie wykorzystywane do wysyłania http lub https żądanie do serwera za sceną i załadować odpowiedź z powrotem do skryptu. Jest to obsługiwane przez nowoczesne przeglądarki, a starsze miały podobną nazwę o nazwie ActiveXObject. Zdarzenie onReadyStateChange ma 5 gotowych etapów.

• 0 = żądanie nie inicjowane
• 1 = połączenie serwer ustalone
• 2 = żądanie odebrane
• 3 = przetwarzanie żądania
• 4 = przetwórstwo zakończona, a odpowiedź jest gotowy

.

Answer 2

Cóż, to jest 2017 i obecnie można używać zasobów Timing API wyodrębnić obrazka transferSize, encodedBodySize, decodedBodySize ciągu javascript:

Poniżej znajduje się kod dostępu do informacji rozmiarze dla wszystkie z IMG na stronie (patrz zastrzeżenie do wszystkich poniżej):

var imgElems = document.getElementsByTagName('img'); 
for (var i=0, len = imgElems.length; i < len; i++) 
{ 
    var url = imgElems[i].src || imgElems[i].href; 
    if (url && url.length > 0) 
    { 
     var iTime = performance.getEntriesByName(url)[0]; 
     console.log(iTime.transferSize); //or encodedBodySize, decodedBodySize 
    } 
} 

• Upewnij się uruchomić powyższy kod po onload dokumentów (aby mieć pewność, obrazy są ładowane)
• Ze względu na CORS informacje dotyczące czasu dla obrazów pochodzących z innej domeny mogą być niedostępne (chyba, że ​​serwer innej domeny ustawił nagłówek odpowiedzi HTTP Timing-Allow-Origin)
• Upewnij się, że interfejs czasowy zasobów jest dostępny dla przeglądarki (przeglądarek) celujesz: http://caniuse.com/#feat=resource-timing
• Upewnij się, że rozumiesz różnicę między transferem rozmiaru, encodedBodySize, decodedBodySize, aby upewnić się, że używasz atrybutu o odpowiednim rozmiarze.