JavaScript实现获取img的原始尺寸的方法详解

我来详细讲解“JavaScript实现获取img的原始尺寸的方法详解”的完整攻略。

我来详细讲解“JavaScript实现获取img的原始尺寸的方法详解”的完整攻略。

一、背景说明

在开发网页中，经常需要获取 img 标签的原始尺寸，以便进行响应式布局或者图片的合理展示。对于这种需求，我们可以使用 JavaScript 来获取 img 标签的原始尺寸，本文将介绍几种实现方式。

二、addEventListener 方法

addEventListener 方法是一种常用的获取 img 原始尺寸的方法。其原理是：在 img 加载完成后，获取其自然宽高。

// 第一步：获取 img 元素
let img = document.getElementById('myimg');

// 第二步：给 img 增加 "load" 事件监听
img.addEventListener('load', function(){
    // 第三步：在 "load" 事件中，获取 img 元素的宽度和高度
    let width = this.naturalWidth;
    let height = this.naturalHeight;
    console.log(width, height);
});

上述代码中，我们在获取 img 元素后，给它增加了一个 "load" 事件监听器。当图片加载完成后，会触发 "load" 事件，再通过 naturalWidth 和 naturalHeight 获取其宽度和高度。

三、Image 对象

Image 对象也是一种比较常用的获取 img 原始尺寸的方法。其原理是：创建一个 Image 对象，然后将 img 的 src 赋值给 Image 对象的 src，然后获取其自然宽高。

// 第一步：创建一个 Image 对象
let image = new Image();

// 第二步：将 img 的 src 赋值给 Image 对象的 src
image.src = document.getElementById('myimg').src;

// 第三步：在 Image 对象的 onload 事件中，获取其宽度和高度
image.onload = function(){
    let width = this.naturalWidth;
    let height = this.naturalHeight;
    console.log(width, height);
};

上述代码中，我们先创建一个 Image 对象，然后将 img 的 src 赋值给 Image 对象的 src。等待 Image 对象加载完成后，在 onload 事件中获取 Image 对象的宽度和高度。

四、总结

以上就是 JavaScript 实现获取 img 的原始尺寸所涉及的两种方法，其中 addEventListener 和 Image 对象都可以实现该功能，具体选择哪一种方法可以根据实际情况自行决定。

示例代码如上。