获取图像's磁盘中文件的实际高度和宽度

Get Image's Actual Height and Width File Size in Disk

本文关键字：高度 文件 中文 图像 磁盘 获取      更新时间：2023-09-26

我有一个图像标签：

HTML代码：

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

CSS代码：

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

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

一种方法就是这样做。通过这种方式，您可以获得DOM元素的当前高度和宽度。

<img id="someId" src="image.jpg"></img>
var imageElement = document.getElementById('someId'); 
var height = imageElement.clientHeight;
var width = imageElement.clientWidth;

您可以使用JavaScript来收集元素

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

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

通常人们会在元素上设置一个id或class，以便轻松获取

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

现在您可以通过其类名获取元素

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

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;
相关文章：