是否有任何 JavaScript 或 jQuery API 或方法来获取页面上图像的尺寸？
如何使用 JavaScript 获取图像大小（高度和宽度）？
IT技术
javascript
jquery
image
2021-01-11 22:40:26
6个回答
您可以使用Javascript以编程方式获取图像并检查尺寸...
const img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';如果图像不是标记的一部分，这会很有用。
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;
另外（除了 Rex 和 Ian 的回答）还有：
imageElement.naturalHeight
和
imageElement.naturalWidth
这些提供了图像文件本身的高度和宽度（而不仅仅是图像元素）。
如果您正在使用 jQuery 并且您正在请求图像大小，则必须等到它们加载，否则您只会得到零。
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
我认为对这些答案的更新很有用，因为投票得最多的答复之一建议使用clientWidth和 clientHeight，我认为它现在已经过时了。
我用 HTML5 做了一些实验，看看实际返回了哪些值。
首先，我使用了一个名为 Dash 的程序来大致了解图像 API。它指出height和width是图像的渲染高度/宽度，naturalHeight和naturalWidth是图像的固有高度/宽度（仅适用于 HTML5）。
我从一个高度为 300、宽度为 400 的文件中使用了一张美丽蝴蝶的图像。这个 Javascript：
var img = document.getElementById("img1");
console.log(img.height, img.width);
console.log(img.naturalHeight, img.naturalWidth);
console.log($("#img1").height(), $("#img1").width());
然后我使用了这个 HTML，内联 CSS 用于高度和宽度。
<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
结果：
/*Image Element*/ height == 300 width == 400
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
然后我将 HTML 更改为以下内容：
<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />
即使用高度和宽度属性而不是内联样式
结果：
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 90 width() == 115
/*Actual Rendered size*/ 90 115
然后我将 HTML 更改为以下内容：
<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
即同时使用属性和 CSS，看看哪个优先。
结果：
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150