javascript - 如何获取IMG html属性中图像的大小

Question

这个问题已经有答案了:

JavaScript - Get size in bytes from HTML img src (2 个回答)

Get file size, image width and height before upload (7 个回答)

已关闭 6 年前。

我看到这段代码来获取大小 (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

没有直接的方法从<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">