通过JavaScript确定图像文件的大小+尺寸？

一尘不染

通过JavaScript确定图像文件的大小+尺寸？

javascript

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

理想情况下，这可以使用系统Javascript来完成，但是如果我绝对需要JQuery或类似的库（或其中的一小部分），则可以完成。

阅读 253

2020-04-25

共1个答案

一尘不染

编辑：

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

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

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

现在要获取文件大小，现在我只能考虑Internet Explorer为文档和IMG元素公开的fileSize属性。

编辑2： 我想到了什么…

要获得服务器上托管的文件的大小，您可以简单地使用Ajax发出HEADHTTP请求。这种请求用于获取有关该请求隐含的url的元信息，而无需在响应中传输它的任何内容。

在HTTP请求的末尾，我们可以访问响应HTTP标头，包括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请求时，您会受到“同源来源”策略的限制，该策略]允许您仅在同一域内发出请求。

编辑3：

1.）关于Content-Length，我认为大小不匹配可能会发生，例如，如果服务器响应被压缩，则可以进行一些测试以查看这是否在服务器上发生。

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

2020-04-25