在前端开发中，经常需要获取图像的尺寸信息。本文将介绍如何使用JavaScript获取图像的高度和宽度，并提供代码示例。
HTML 图像元素
要获取图像的尺寸信息，我们首先需要理解HTML图像元素。HTML中的图像元素由<img>标签表示，并具有以下属性：
src：指向图像文件的URL。alt：当图像无法加载时显示的替代文本。width：指定图像的宽度。height：指定图像的高度。
获取图像尺寸
方法一：使用DOM属性
我们可以使用DOM属性来获取图像的尺寸信息。具体来说，我们可以通过创建一个新的Image对象并将其分配给src属性来加载图像。然后，我们可以访问该对象的naturalWidth和naturalHeight属性，这些属性包含图像的实际尺寸。
const img = new Image();
img.src = 'example.jpg';
img.onload = function() {
const width = this.naturalWidth;
const height = this.naturalHeight;
console.log(`Image dimensions: ${width} x ${height}`);
};方法二：使用回调函数
我们还可以使用回调函数来获取图像的尺寸信息。在此方法中，我们创建一个新的Image对象，并将其传递给回调函数。在回调函数中，我们可以访问width和height属性，这些属性包含图像的实际尺寸。
-- -------------------- ---- -------
-------- ----------------- --------- -
----- --- - --- --------
---------- - ---------- -
------------------- ------------
--
------- - ----
-
-- ----
--------------------------- --------------- ------- -
------------------ ----------- -------- - ------------
---结论
获取图像的尺寸信息在前端开发中非常常见。本文介绍了两种方法：使用DOM属性和回调函数。无论您选择哪种方法，都需要理解HTML图像元素以及其相关属性。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8160