如何在IMG html属性中获取图像的大小[重复]

Question

我看到这段代码来获取图像的 size(KB, MB)。但是此代码在更改后从按钮获取数据。此代码可以适用于我的问题吗？或者有没有其他方法可以直接使用javascript获取图片的大小？。

$(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">) 我想得到这张图片的大小。我怎么得到它？正如我上面的示例，它将大小存储在按钮中并检索它。

Answer 1

除了获取其naturalWidth 和naturalHeight 值，当然，如果它是有效图像之一，没有直接的方法可以从<img> 元素获取有关它已加载的数据的任何信息浏览器支持的类型。

唯一的方法是再次获取数据，作为一个 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">

Answer 2

您可以使用此函数通过 url 获取任何文件的文件大小：

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/