使用 js/jquery 加载后如何获取图像大小（内存）答案

【问题标题】：How to get the image size (memory) after it is loaded using js/jquery使用 js/jquery 加载后如何获取图像大小（内存）
【发布时间】：2013-08-20 10:49:42
【问题描述】：

我想知道使用 js 或 jquery 如何在加载图像后获取图像的大小（字节、KB、MB）。我不想使用任何 ajax 或发送任何额外的 http 请求。就像我们使用 $("#imageId").height() 一样，我们如何获取内存大小？

【问题讨论】：

您需要的数字有多准确？您是否需要实际的内存使用或文件大小（不同）。将高度乘以宽度乘以每个像素的字节数（通常为 4）将为您提供粗略的内存大小，但大多数图像文件都是压缩的。文件大小需要来自服务器。
@HiTechMagic 如果我得到 95% 的正确结果就可以了。不需要确切的。我应该接受你的 height*width*4 想法吗？
这取决于你所说的内存大小，正如上面的评论所指出的那样。实际内存大小（如位图大小）将是该数字，而实际占用的 RAM 内存可能因压缩而有所不同；我不是专家，但我认为图像被压缩保存在内存中，并且在发送到显示设备之前仅解压缩为位图。
@AlexPaven 我想要在图像的属性选项卡后找到的尺寸。
假设 IE，该大小是文件的大小，除非使用一些自定义浏览器 API 或发出额外的 HEAD 请求或通过 JS 加载所有图像（正如我在下面提到的），否则无法可靠地找到该大小，据我所知。编辑：在 IE 上有 fileSize 属性，但我认为其他浏览器没有对应的属性

标签： javascript jquery html

【解决方案1】：

根据@CMS 在Determining image file size + dimensions via Javascript? 中的回答

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

这是 AFAIK 唯一可能的解决方案。

更新： 我不知道这个解决方案有多准确，但这是我的猜测

function bytes(string) {
  var escaped_string = encodeURI(string);
  if (escaped_string.indexOf("%") != -1) {
    var count = escaped_string.split("%").length - 1;
    count = count == 0 ? 1 : count;
    count = count + (escaped_string.length - (count * 3));
  }
  else {
    count = escaped_string.length;
  }
}
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;

// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

// Get the data-URL formatted image
// Firefox supports PNG and JPEG. You could check img.src to
// guess the original format, but be aware the using "image/jpg"
// will re-encode the image.
var dataURL = canvas.toDataURL("image/png");

var base_64 = dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
console.log(bytes(base_64));

来源：How can I estimate the disk size of a string with JavaScript?、Get image data in JavaScript?

【讨论】：

我不想使用任何 ajax 或发送任何额外的 http 请求的哪一部分。 你不明白吗？
@RoyiNamir 这是 AFAIK 唯一可行的方法。
@Exception - 在您的帖子开头可能需要澄清一下，没有额外的请求是不可能的，然后展示如何做到这一点。
@webnoob 是的，我同意！
但是这种方式比较耗时。如果我必须加载非常小的图像，在这种情况下，图像甚至在获得 ajax 请求的响应之前就已加载。但是我需要在加载图像后立即触发一个以大小为参数的函数。 @异常