如何使用 JavaScript 获取图片尺寸

在网页开发过程中，我们经常需要获取图片的尺寸（宽度和高度）。无论是为了动态调整布局，还是为了其他图像处理任务，了解如何用JavaScript获取图片尺寸是非常有用的。本文将介绍几种方法，帮助你在JavaScript或jQuery中获取图片的宽度和高度。

方法一：现代浏览器中的新方法

对于现代浏览器，你可以使用naturalWidth和naturalHeight属性获取图片的原始宽度和高度，而无需等待图片加载完成。这对于需要快速获取图片尺寸的场景非常有用：

var img = document.getElementById('myImage');
console.log(img.naturalWidth + 'x' + img.naturalHeight);

方法二：JavaScript 更通用的方法

我们可以通过JavaScript创建一个Image对象，并在图像加载完成后，访问其宽度和高度属性。这种方法非常适合图片不是直接包含在HTML标记中的情况。

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';

在上面的代码中，我们首先创建了一个Image对象。然后，通过设置onload事件处理程序，在图片加载完成后触发函数，使用this.width和this.height属性获取图片的宽度和高度。

方法二：使用jQuery获取图片尺寸

如果你已经在项目中使用了jQuery，也可以很容易地获取图片的尺寸。这里是一个简单的示例：

$(document).ready(function() {
  var img = $('#myImage');
  img.on('load', function() {
    alert(this.width + 'x' + this.height);
  });
});

在这个例子中，我们使用了jQuery的$(document).ready()方法，确保文档完全加载后执行代码。然后，我们选择ID为myImage的图片，并为其绑定load事件处理程序，以获取图片的宽度和高度。

注意事项

图片必须可见：确保图片或其父元素没有display: none;样式，否则无法获取图片的实际尺寸。
图片必须加载完成：除方法一之外，图片在加载完成之前，其宽度和高度属性可能为零。所以，最好使用onload事件处理程序。
跨域问题：如果图片是从不同的域加载的，可能会遇到跨域问题，导致无法获取其尺寸。