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

在Web开发中，获取图像的大小是非常常见的需求。JavaScript可以很方便地帮助我们获取图像的高度和宽度。下面介绍两种获取图像大小的方法。

1. 使用naturaWidth和naturalHeight属性

获取图像大小的最简单方法是使用naturaWidth和naturalHeight属性。这两个属性用于获取图像的自然大小（原始大小）。下面是获取图像大小的代码：

let img = document.getElementById('myImg');
let width = img.naturalWidth;
let height = img.naturalHeight;
console.log('宽度：' + width + '像素');
console.log('高度：' + height + '像素');

这里我们先获取图像对象，然后通过访问naturaWidth和naturalHeight属性获取图像的大小。如果图像加载完成后，这两个属性就包含了图像的实际高度和宽度，如果图像还没有加载完成，这两个属性值将为0。

2. 使用JavaScript中Image对象的方式

第二种方法是通过创建一个Image对象，然后在对象的onload事件中访问其width和height属性，如下所示：

let img = new Image();
img.onload = function() {
  console.log('宽度：' + this.width + '像素');
  console.log('高度：' + this.height + '像素');
}
img.src = 'path/to/image.jpg';

在这个例子中，我们创建了一个Image对象，并将其源设置为图像的路径。一旦图像加载完成，就会触发onload事件，我们就可以在事件中访问width和height属性。

总结

以上两种方法都可以帮助我们很容易地获取图像的大小。如果想获取图像大小的话，我们可以选择其中任何一种方法。