使用js/jquery加载图片后如何获取其大小（内存）

Question

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

- Paul Shan

---

你需要多精确的数字？你需要实际内存使用量还是文件大小（它们是不同的）？将高度乘以宽度再乘以每像素字节数（通常为4），可以给出大致的内存大小，但大多数图像文件都是压缩的。文件大小需要从服务器获取。 - iCollect.it Ltd

@HiTechMagic，如果我能得到95%的正确结果，那就可以了。不需要完全准确。我应该采用你提出的高度宽度4的想法吗？ - Paul Shan

这取决于您所说的“内存大小”的含义，正如上面的评论所指出的那样。实际内存大小（即位图大小）将是该数字，而实际占用的RAM内存可能会因为压缩而有所不同；我不是专家，但我认为图像被压缩保存在内存中，只有在发送到显示设备之前才解压成位图。 - Alex Paven

@AlexPaven 我想要在图片属性选项卡中找到的尺寸。 - Paul Shan

假设使用IE浏览器，文件大小（size）无法可靠地获取，除非使用一些自定义的浏览器API或进行额外的HEAD请求或通过JS加载所有图像（如我在下面某处提到的），据我所知。编辑：在IE上有fileSize属性，但我认为其他浏览器没有相应的属性。 - Alex Paven

Answer 1

根据 @CMS 在 通过 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);

据我所知，这是唯一可能的解决方案。

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

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

来源： 如何使用JavaScript估算字符串的磁盘大小？，在JavaScript中获取图像数据？

- Exception

---

“我不想使用任何ajax或发送任何额外的http请求。”这句话你哪部分没理解？ - Royi Namir

@RoyiNamir 这是我所知道的唯一可能的方式。 - Exception

但这种方式很费时间。如果我需要加载非常小的图像，在这种情况下，图像甚至在获取Ajax请求的响应之前就已经加载完成了。但我需要在图片加载完成后立即触发一个带有大小参数的函数。@Exception - Paul Shan

请注意，示例显示的是HEAD请求，与完整请求相比要便宜得多（当然对于许多图像等仍然很昂贵）。如果可能的话，您还可以考虑通过JavaScript加载所有图像，这样您就可以在加载过程中检查其他信息，然后将结果放置在页面中...尽管这也可能不可行。 - Alex Paven

顺便说一句，这是原始图像大小，一旦在客户机器的内存中加载为JPEG格式，它可以比原始大小大得多，因为图像处理器会将其在内存中解压缩，而且该大小无法预知，除非在机器上进行测量。 - Robert Hoffmann