Wie bekomme ich die Größe eines Bildes in IMG HTML-Attribut

Question

Ich sah diesen Code, um die Größe (KB, MB) eines Bildes zu erhalten. Aber dieser Code erhält die Daten von der Schaltfläche nach der Änderung. Kann dieser Code auf meine Frage angewendet werden? Oder gibt es eine andere Möglichkeit, die Größe des Bildes direkt mit Javascript zu ermitteln?

$(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"/>

EDIT Als nnnnn gesagt. Ich habe eine IMG (eg. < img src="someimg.jpg">) Ich möchte die Größe dieses Bildes erhalten. Wie bekomme ich es?. Wie in meinem obigen Beispiel speichern Sie die Größe in der Schaltfläche und rufen sie ab.

Answer 1

Es gibt keinen direkten Weg von einem <img> Elemente irgendwelche Informationen über die Daten zu erhalten, es geladen ist, mit Ausnahme deren naturalWidth und naturalHeight Werte zu erhalten, und natürlich, wenn es sich um einen der gültigen Bildtypen vom Browser unterstützt .

Der einzige Weg ist dann, die Daten wieder zu holen, als Blob. Von dort aus können Sie die Größe der Datei sehen. Beachten Sie jedoch, dass diese Methode durch die gleichen Richtlinien beschränkt ist.

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

Answer 2

können Sie diese Funktion verwenden, um die Dateigröße einer Datei mit dem Führen Sie die URL zu erhalten:

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

und es wie folgt verwendet:

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

Versuchen Sie es hier: https://jsfiddle.net/emilvr/mv5r6xxm/