JS获取图片宽高|极客笔记

JS获取图片宽高

在网页开发中，经常会遇到需要获取图片的宽高信息的情况。通过JavaScript可以轻松地获取图片的宽高，并且可以根据需要对图片进行相应的处理。

方法一：使用Image对象

通过创建一个新的Image对象，我们可以获取图片的宽高信息。代码示例如下：

var img = new Image();
img.src = 'https://example.com/image.jpg';

img.onload = function() {
    var width = this.width;
    var height = this.height;
    console.log('图片宽度：' + width);
    console.log('图片高度：' + height);
};

在上面的代码中，首先我们创建一个新的Image对象，并指定了图片的src属性为要获取信息的图片的URL。接着通过监听Image对象的onload事件，在图片加载完成后，获取图片的宽高信息并进行相应的处理。

运行上面的代码，控制台会输出图片的宽度和高度信息。

方法二：使用NaturalWidth和NaturalHeight属性

另一种获取图片宽高的方法是通过图片元素的naturalWidth和naturalHeight属性。代码示例如下：

var imgElement = document.getElementById('myImage');
var width = imgElement.naturalWidth;
var height = imgElement.naturalHeight;

console.log('图片宽度：' + width);
console.log('图片高度：' + height);

在上面的代码中，我们首先通过document.getElementById方法获取到id为myImage的图片元素，然后分别使用naturalWidth和naturalHeight属性获取图片的宽高信息。

方法三：使用DOM的offsetWidth和offsetHeight属性

除了上述方法外，还可以通过图片元素的offsetWidth和offsetHeight属性来获取图片的宽高信息。代码示例如下：

var imgElement = document.getElementById('myImage');
var width = imgElement.offsetWidth;
var height = imgElement.offsetHeight;

console.log('图片宽度：' + width);
console.log('图片高度：' + height);

在上面的代码中，我们通过document.getElementById方法获取到id为myImage的图片元素，然后分别使用offsetWidth和offsetHeight属性获取图片的宽高信息。