如何使用JavaScript获取图像大小（高度和宽度）？

Thought this might be helpful to some who are using Javascript and/or Typescript in 2019.

I found the following, as some have suggested, to be incorrect:

let img = new Image();
img.onload = function() {
  console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";

This is correct:

let img = new Image();
img.onload = function() {
  console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg:;

Conclusion:

Use img, not this, after onload.

var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser  360 browser ...

当页面在js或jquery中加载时，您可以应用onload handler属性，如下所示：

$(document).ready(function(){
   var width = img.clientWidth;
   var height = img.clientHeight;

 });

您还可以使用：

var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;

在使用实际图像尺寸之前，您应该加载源图像。如果您使用JQuery框架，则可以通过简单的方法获得真实的图像大小。

$("ImageID").load(function(){
  console.log($(this).width() + "x" + $(this).height())
})

使用jQuery库-

使用.width()和.height()。

更多有关jQuery width和jQuery heigth的信息。

示例代码-

$(document).ready(function(){
    $("button").click(function()
    {
        alert("Width of image: " + $("#img_exmpl").width());
        alert("Height of image: " + $("#img_exmpl").height());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>

我认为对这些答案的更新很有用，因为投票最好的答复之一是建议使用clientWidthand clientHeight，我认为它已经过时了。

我已经对HTML5进行了一些实验，以查看实际上返回了哪些值。

首先，我使用了一个名为Dash的程序来获取图像API的概述。它声明height和width是图像的渲染高度/宽度，并且naturalHeight和naturalWidth是图像的固有高度/宽度（并且仅HTML5）。

我使用了一个美丽的蝴蝶的图像，该图像来自高度为300且宽度为400的文件。

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

另外（除了Rex和Ian的答案），还有：

imageElement.naturalHeight

和

imageElement.naturalWidth

这些提供了图像文件本身的高度和宽度（而不仅仅是图像元素）。

使用JQuery，您可以执行以下操作：

var imgWidth = $("#imgIDWhatever").width();

如果您使用的是jQuery，但您要求的是图片大小，则必须等待它们加载，否则您将只能得到零。

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});