获取磁盘中图像的实际高度和宽度文件大小[重复]

Posted 2023-03-15

【中文标题】获取磁盘中图像的实际高度和宽度文件大小[重复]

【英文标题】：Get Image's Actual Height and Width File Size in Disk [duplicate]

【发布时间】：2015-05-05 02:57:50

【问题描述】：

我有一个图片标签：

html 代码：

<img src="image.jpg"></img>

CSS 代码：

img
  
   max-width: 100%;
   max-height: 100%; 

我只想知道它的实际高度和宽度（以像素为单位）（内存大小），如果它的宽度和高度设置为自动。如何在 javascript 中做到这一点？

【问题讨论】：

***.com/questions/623172/…

@Marcin Lojewski -->不适用于我，我想知道磁盘中图像的实际文件大小。

【参考方案1】：

一种方法是这样做。这样你就可以得到 DOM 元素的当前高度和宽度。

<img id="someId" src="image.jpg"></img>

var imageElement = document.getElementById('someId'); 
var height = imageElement.clientHeight;
var width = imageElement.clientWidth;

【讨论】：

对我不起作用，我想知道磁盘中图像的实际文件大小。

【参考方案2】：

您可以使用 JavaScript 来收集元素

用于高度 document.querySelector('img').offsetHeight;

用于宽度 document.querySelector('img').offsetWidth;

通常人们会在元素上设置id 或class 以便轻松抓取它。

像这样 <img class='image' src='image.jpg'></img>

现在你可以通过类名来获取元素了

document.querySelector('.image').offsetHeight;

【讨论】：

对我不起作用，我想知道磁盘中图像的实际文件大小。

【参考方案3】：

clientWidth 和 clientHeight 是 DOM 属性，显示 DOM 元素内部尺寸的当前浏览器内大小（不包括边距和边框）。因此，对于 img 元素，这将获得可见图像的实际尺寸。

var img = document.getElementById('imageid');
 //or however you get a handle to the IMG
 var width = img.clientWidth;
 var height = img.clientHeight;