作为 Web 应用程序的一部分，一旦图像被下载并呈现在网页上，我需要在浏览器上下文中确定图像的文件大小 (kb) 和分辨率（例如，我可以显示该信息在页面上。显然，这需要在客户端完成。必须能够在没有 ActiveX 控件或 Java 小程序（IE7+、FF3+、Safari 3+、IE6 不错）的情况下解决 x-browser，尽管它没有每个浏览器都必须是相同的解决方案。
理想情况下，这将使用系统 Javascript 完成，但如果我绝对需要 JQuery 或类似库（或其中的一小部分），则可以这样做。
【问题讨论】：
标签： javascript image
编辑：
要获取不包括边框和边距的 DOM 元素（在您的情况下为 IMG 元素）的当前浏览器内像素大小，您可以使用 clientWidth 和 clientHeight 属性。
var img = document.getElementById('imageId');
var width = img.clientWidth;
var height = img.clientHeight;
现在要获取文件大小，现在我只能考虑 Internet Explorer 为文档公开的 fileSize property 和 IMG 元素...
编辑 2： 我想到了什么......
要获取服务器上托管的文件的大小，您可以简单地使用 Ajax 创建一个HEAD HTTP Request。这种请求用于获取请求所隐含的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 请求时，您会受到 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';
【讨论】：
naturalWidth和naturalHeight属性，而不是创建一个新的img元素。
使用 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>
【讨论】：
如果您需要获取原始图像尺寸（不在浏览器上下文中），clientWidth 和 clientHeight 属性不起作用，因为如果图像是通过 css 拉伸/收缩。
要获得原始图像尺寸，请使用 naturalHeight 和 naturalWidth 属性。
var img = document.getElementById('imageId');
var width = img.naturalWidth;
var height = img.naturalHeight;
p.s. 这不会回答原始问题，因为接受的答案可以完成这项工作。相反，这就像对它的补充。
【讨论】：
这个怎么样：
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/
由于同源政策，只能在同源下工作
【讨论】：
关于宽高：
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
【讨论】：
服务人员可以访问标头信息，包括 Content-Length 标头。
Service Worker 理解起来有点复杂，所以我构建了一个名为 sw-get-headers 的小型库。
比你需要的：
response 活动Content-Length 标头！请注意，您的网站需要在 HTTPS 上才能使用 Service Worker，浏览器需要与与 Service Worker 兼容，并且图片必须在 与您的页面相同的来源。
【讨论】：
大多数人已经回答了如何知道下载图像的尺寸，所以我将尝试回答问题的其他部分 - 知道下载图像的文件大小。
您可以使用资源计时 API 来执行此操作。非常明确地，transferSize、encodedBodySize 和 decodedBodySize 属性可以用于此目的。
如果您寻求代码，请在此处查看我的答案以获取代码 sn-p 和更多信息：JavaScript - Get size in bytes from HTML img src
【讨论】：
您可以使用通用 Image 对象动态加载源然后对其进行测量：
const img = new Image();
img.src = this.getUrlSource()
img.onload = ({target}) =>{
let width = target.width;
let height = target.height;
}
【讨论】：
您可以使用getElement(...).width 和...height 获取尺寸。
由于出于安全原因，JavaScript 无法访问本地磁盘上的任何内容，因此您无法检查本地文件。浏览器缓存中的文件也是如此。
您确实需要一个可以处理 AJAX 请求的服务器。在该服务器上，安装一个下载图像并将数据流保存在仅计算字节数的虚拟输出中的服务。请注意，您不能总是依赖 Content-length 标头字段，因为图像数据可能已被编码。否则，发送 HTTP HEAD 请求就足够了。
【讨论】：
您可以使用类似的方法在页面上查找图像的尺寸
document.getElementById('someImage').width
文件大小，但是，你必须使用服务器端的东西
【讨论】：
var img = new Image();
img.src = sYourFilePath;
var iSize = img.fileSize;
【讨论】：
您唯一能做的就是将图像上传到服务器并使用诸如 C# 之类的服务器端语言检查图像大小和尺寸。
编辑：
您的需求不能仅使用 javascript 来完成。
【讨论】：