确定图像文件大小+；通过Javascript的维度？

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

---

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

您可以使用

getElement（…）.width

和

…height

获得维度

由于JavaScript出于安全原因无法访问本地磁盘上的任何内容，因此无法检查本地文件。浏览器缓存中的文件也是如此

您确实需要一个能够处理AJAX请求的服务器。在该服务器上，安装一个服务，下载图像并将数据流保存在一个只计算字节数的虚拟输出中。请注意，您不能总是依赖头字段，因为图像数据可能会被编码。否则，发送HTTP头请求就足够了。

编辑：

要获取DOM元素（在您的示例中为IMG元素）的当前浏览器内像素大小（不包括边框和边距），可以使用和属性

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

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

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

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

现在要获得文件大小，现在我只能考虑Internet Explorer为文档和元素公开的

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

要获得托管在服务器上的文件的大小，您只需使用Ajax创建一个url。这种请求用于获取请求所隐含的url的元信息，而无需在响应中传输该url的任何内容

在HTTP请求结束时，我们可以访问响应HTTP头，包括表示文件大小（以字节为单位）的

使用原始数据的基本示例：

注意：请记住，当您执行Ajax请求时，会受到限制，这允许您仅在同一域内发出请求

检查概念的工作证明

编辑3:

1.）关于内容长度，我认为可能会发生大小不匹配的情况。例如，如果服务器响应是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';

---

您唯一能做的就是将图像上传到服务器，并使用一些服务器端语言（如C#）检查图像大小和尺寸

编辑：

---

仅使用javascript无法满足您的需要。

您可以使用以下方法在页面上找到图像的维度

document.getElementById('someImage').width

---

文件大小，但是，您必须使用服务器端的东西，使用Javascript检查上传的图像大小

var img = new Image();
img.src = sYourFilePath;
var iSize = img.fileSize;

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

函数检查（）{
var imgpath=document.getElementById（'imgfile'）；
如果（！imgpath.value==“”）{
var img=imgpath.files[0]。大小；
var imgsize=img/1024；
警报（imgsize）；
}
}

Html代码

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

服务人员可以访问标题信息，包括

内容长度

标题

服务人员的理解有点复杂，所以我建立了一个名为

您需要：

订阅库的

响应

事件

在所有网络请求中标识映像的url

在这里，您可以阅读

内容长度

标题

---

请注意，您的网站需要使用HTTPS才能使用服务人员，浏览器需要与服务人员兼容，并且图像必须与您的页面位于同一来源。

大多数人已经回答了如何知道下载图像的尺寸，因此我将尝试回答问题的其他部分-知道下载图像的文件大小

您可以使用资源计时api来实现这一点。特别是transferSize、EncodedBySize和DecodedBySize属性可用于此目的

请查看我的答案，以获取代码片段和更多信息，如果您需要的话：

这个怎么样：

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

由于同源策略，只能在同源下工作

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

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

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

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

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

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

---

p.s.这并不能回答原来的问题，因为接受的答案起作用。相反，这就像是对它的补充。

关于宽度和高度：

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

---

您可以使用通用图像对象动态加载源，然后对其进行测量：

    const img = new Image();
    img.src = this.getUrlSource()
    img.onload = ({target}) =>{
      let width = target.width;
      let height = target.height;
    }

---

请注意，前三个答案是关于我开始使用的不正确的writeup（我说的是图像上传）。我向这些人道歉。请注意，内容长度>=实际文件大小，因为数据可以进行编码以进行传输。谢谢。以下几点：1）JPG将采用何种编码方式来增加大小？2） 如果在浏览器中调整图像的大小，有没有办法获得原始图像的尺寸？hm对我不起作用，我做错了什么（它显示我0）$（“#temp_image”）.html（“”）；var img=document.getElementById（'tmp'）；警报（img.clientWidth）；如果其他人想尝试一下，chrome至少会抛出一个十字