How to get the image size (height & width) using JavaScript

在JavaScript中，获取图像的大小（高度和宽度）可以通过几种不同的方法实现，具体取决于图像是已经在网页中显示，还是作为一个新资源被加载。下面我将分别介绍这两种情况的常用方法：

1. 获取网页中已存在的图像的大小

如果图像已经存在于网页中，你可以直接使用DOM API来获取其尺寸。这里是一个基本的例子：

html
<img id="myImage" src="image.jpg" alt="测试图像">

<script>
  window.onload = function() {
    var img = document.getElementById('myImage');
    var width = img.clientWidth;
    var height = img.clientHeight;
    console.log("图像宽度: " + width + "，图像高度: " + height);
  };
</script>

在这个例子中，我们首先确保整个页面加载完成（window.onload），然后通过getElementById方法获取图像的DOM元素。之后，我们使用clientWidth和clientHeight属性来获取图像的宽度和高度。

2. 获取新加载图像的大小

如果你需要获取一个还未添加到DOM中的图像的大小，你可以创建一个新的Image对象，然后在图像加载后读取其尺寸。这里是如何做的：

javascript
var img = new Image();
img.onload = function() {
  var width = img.width;
  var height = img.height;
  console.log("图像宽度: " + width + "，图像高度: " + height);
};
img.src = 'image.jpg';

在这个例子中，我们创建了一个新的Image对象，并设置了一个onload事件处理函数，该函数在图像加载完成后触发。在这个函数中，我们可以通过width和height属性来访问图像的尺寸。最后，我们设置src属性来开始加载图像。

注意事项

• 在获取图像尺寸时，确保图像已经加载完成，否则你可能得到的是0或错误的值。
• 对于跨域的图像资源，可能需要处理CORS（跨源资源共享）相关的问题。

使用以上任一方法，你都可以有效地获取JavaScript中图像的尺寸。选择哪一种方法取决于你的具体需求和场景。