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

JS获取图片的宽高

在网页开发中，经常会遇到需要获取图片的宽高信息的情况，比如根据图片宽高比例调整页面布局，或者动态获取图片的尺寸来进行特殊处理。在JavaScript中，我们可以使用一些方法来获取图片的宽高信息。

使用Image对象来获取图片的宽高

JavaScript提供了一个内置的Image对象，可以用来加载图片并获取其宽高信息。我们可以通过创建一个Image对象，将图片的src属性指向要获取宽高的图片，然后在图片加载完成后读取其naturalWidth和naturalHeight属性来获取图片的宽高信息。

// 创建一个Image对象
var img = new Image();
// 设置图片src属性
img.src = 'image.jpg';
// 图片加载完成后获取宽高信息
img.onload = function() {
    var width = img.naturalWidth;
    var height = img.naturalHeight;
    console.log("图片宽度：" + width);
    console.log("图片高度：" + height);
};

上面的代码创建了一个Image对象，将其src属性设置为’image.jpg’，然后在图片加载完成后获取其naturalWidth和naturalHeight属性来获取图片的宽高信息。

获取已加载图片的宽高

如果需要获取页面中已经加载的图片的宽高信息，我们可以直接通过获取页面上的img标签元素，然后读取其naturalWidth和naturalHeight属性来获取图片的宽高信息。

// 获取页面上的img标签元素
var imgElement = document.getElementsByTagName('img')[0];
// 获取图片的宽高信息
var width = imgElement.naturalWidth;
var height = imgElement.naturalHeight;
console.log("图片宽度：" + width);
console.log("图片高度：" + height);

上面的代码通过document.getElementsByTagName(‘img’)[0]获取页面上的第一个img标签元素，然后读取其naturalWidth和naturalHeight属性来获取图片的宽高信息。

获取背景图片的宽高

有时候我们需要获取页面中元素的背景图片的宽高信息，可以通过计算元素的背景图片的尺寸来获取。我们可以使用getComputedStyle方法来获取元素的背景图片的url，然后通过创建一个新的Image对象来获取背景图片的宽高信息。

// 获取元素的背景图片
var element = document.getElementById('element');
var backgroundImageUrl = window.getComputedStyle(element).backgroundImage;
// 获取背景图片URL
var imageUrl = backgroundImageUrl.slice(4, -1).replace(/['"]/g, "");
// 创建一个新的Image对象
var img = new Image();
img.src = imageUrl;
img.onload = function() {
    var width = img.naturalWidth;
    var height = img.naturalHeight;
    console.log("背景图片宽度：" + width);
    console.log("背景图片高度：" + height);
};

上面的代码首先获取指定元素的背景图片的URL，然后创建一个新的Image对象，将其src属性设置为背景图片的URL，最后在图片加载完成后获取背景图片的宽高信息。