JavaScript - Ottieni dimensioni in byte da HTML img src

Question

Mi piacerebbe sapere come ottenere la dimensione in byte da "src" da un tag "img" con HTML/JS.

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

Nell'esempio di cui sopra avrei fondamentalmente vogliono sapere quanto è grande "testpattern.gif" è (in byte).

Grazie in anticipo.

Answer 1

Javscript è un puro script di lato client e se mi chiedi se possiamo ottenere le dimensioni dell'immagine solo utilizzando javascript, la mia risposta è "NO". Anche se esegui i file localmente, non sarai in grado di ottenere le dimensioni del file.

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); 

Questo è fondamentalmente utilizzato per inviare http o https richiesta a un server dietro le quinte e caricare la risposta torna allo script. Questo è supportato dai browser moderni, quelli più vecchi ne avevano uno simile chiamato ActiveXObject. L'evento onReadyStateChange ha le sue 5 fasi pronte.

• 0 = richiesta non inizializzato
• 1 = connessione server stabilita
• 2 = richiesta ricevuta
• 3 = elaborazione richiesta
• 4 = elaborazione finito e la risposta è pronta

.

Answer 2

Bene, questo è il 2017 e ora è possibile utilizzare risorse Timing API per estrarre di un'immagine transfersize, encodedBodySize, decodedBodySize entro javascript:

Di seguito si riporta il codice per accedere alle informazioni di dimensione per tutti i imgs in una pagina (si veda l'avvertenza a tutti al di sotto):

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 
    } 
} 

• assicurarsi che si esegue il codice di cui sopra, dopo il documento onload (per essere sicuro che le immagini vengono caricate)
• A causa di CORS, le informazioni sui tempi per le immagini provenienti da un dominio diverso potrebbero non essere disponibili (a meno che il server del diverso dominio non abbia impostato l'intestazione di risposta HTTP Timing-Allow-Origin)
• Accertarsi che l'API di temporizzazione delle risorse sia disponibile per i browser stai mirando a: http://caniuse.com/#feat=resource-timing
• Assicurati di comprendere la differenza tra transferSize, codifiedBodySize, decodedBodySize per essere sicuro di utilizzare l'attributo di dimensione corretto.