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

Question

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

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

Answer 1

编辑:

要获取除边框和边距之外的DOM元素(在您的IMG元素中)的当前浏览器内像素大小,您可以使用clientWidth和clientHeight属性.

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

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

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

编辑2:有些东西出现在我的脑海里......

要获得托管在服务器上的文件的大小,您可以使用Ajax 简单地创建HEAD HTTP请求.这种请求用于获取关于请求所暗示的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,我认为如果服务器响应被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';

Answer 2

使用Javascript检查上传的图像大小

<script type="text/javascript">
    function check(){
      var imgpath=document.getElementById('imgfile');
      if (!imgpath.value==""){
        var img=imgpath.files[0].size;
        var imgsize=img/1024; 
        alert(imgsize);
      }
    }
</script>

Html代码

<form method="post" enctype="multipart/form-data" onsubmit="return check();">
<input type="file" name="imgfile" id="imgfile"><br><input type="submit">
</form>

Answer 3

关于宽度和高度：

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

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

关于您可以使用的文件大小performance

var size = performance.getEntriesByName(url)[0];
console.log(size.transferSize); // or decodedBodySize might differ if compression is used on server side

Answer 4

这个怎么样：

var imageUrl = 'https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg';
var blob = null;
var xhr = new XMLHttpRequest(); 
xhr.open('GET', imageUrl, true); 
xhr.responseType = 'blob';
xhr.onload = function() 
{
    blob = xhr.response;
    console.log(blob, blob.size);
}
xhr.send();

http://qnimate.com/javascript-create-file-object-from-url/

由于同源政策，只能在相同起源下工作

Answer 5

获取图像的原始尺寸

如果需要获取原始图像尺寸（不在浏览器上下文中），则clientWidth和clientHeight属性不起作用，因为如果通过css拉伸/收缩图像，它们将返回不正确的值。

要获取原始图像尺寸，请使用naturalHeight和naturalWidth属性。

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

var width = img.naturalWidth;
var height = img.naturalHeight;

ps这不能回答原始问题，因为已接受的答案可以完成工作。相反，这就像添加内容一样。