javascript - 通过 Javascript 确定图像文件大小 + 尺寸？

Question

作为网络应用程序的一部分，在网页上下载并呈现图像后，我需要在浏览器上下文中确定图像的文件大小 (kb) 和分辨率(例如，这样我就可以显示该信息在页面上。显然，这需要在客户端完成。必须能够在没有 ActiveX 控件或 Java 小程序(IE7+、FF3+、Safari 3+、IE6 很不错)的情况下解决 x 浏览器问题，尽管它没有不必为每个浏览器提供相同的解决方案。

理想情况下，这将使用系统 Javascript 完成，但如果我绝对需要 JQuery 或类似的库(或它的一小部分)，那可以完成。

Answer 1

编辑:

要获取不包括边框和边距的 DOM 元素(在您的情况下为 IMG 元素)的当前浏览器内像素大小，您可以使用 clientWidth和 clientHeight属性。

var img = document.getElementById('imageId'); 

var width = img.clientWidth;
var height = img.clientHeight;

现在要获取文件大小，现在只能想着fileSize property了Internet Explorer 公开文档和 IMG元素...

编辑 2: 我想到了一些事情......

要获取托管在服务器上的文件的大小，您可以简单地制作一个HEAD HTTP Request。使用 Ajax。这种请求用于获取有关请求隐含的 url 的元信息，而不在响应中传输它的任何内容。

在 HTTP 请求结束时，我们可以访问响应 HTTP header ，包括 Content-Length表示文件的大小(以字节为单位)。

使用原始 XHR 的基本示例:

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

注意:请记住，当您发出 Ajax 请求时，您会受到 Same origin policy 的限制。 ，它允许您仅在同一域内发出请求。

检查概念的工作证明 here .

编辑 3:

1.) 关于 Content-Length，我认为可能会发生大小不匹配的情况，例如，如果服务器响应是 gzip 压缩的，您可以进行一些测试，看看您的服务器是否会发生这种情况。

2.) 要获取图像的原始尺寸，您可以通过编程方式创建 IMG 元素，例如:

var img = document.createElement('img');

img.onload = function () { alert(img.width + ' x ' + img.height); };

img.src='http://sstatic.net/so/img/logo.png';