正文

学会JS轻松获取图片尺寸：实用方法教你快速获取图片长宽尺寸

/0 浏览量
0619

在网页开发中，有时候我们需要获取图片的尺寸信息，以便进行布局调整、样式设计或者是一些图片处理操作。JavaScript 提供了多种方法来获取图片的尺寸，下面我将详细介绍几种实用的方法，帮助你轻松获取图片的长宽尺寸。

方法一：使用 Image 对象

在 JavaScript 中，我们可以通过创建一个 Image 对象，并设置其 src 属性为图片的 URL，然后读取其 width 和 height 属性来获取图片的尺寸。

// 创建 Image 对象
var img = new Image();

// 设置图片的 src 属性
img.src = '图片的 URL';

// 图片加载完成后，获取尺寸
img.onload = function() {
    console.log('图片宽度：' + img.width + 'px');
    console.log('图片高度：' + img.height + 'px');
};

// 如果图片无法加载，可以设置一个错误处理函数
img.onerror = function() {
    console.log('图片加载失败');
};

这种方法简单易用，但需要注意的是，图片的加载过程是异步的，因此我们需要在图片加载完成后才能获取到尺寸信息。

方法二：使用 CSS 属性

通过读取图片的 CSS 属性，我们也可以获取到图片的尺寸。这种方法不需要创建 Image 对象，但需要确保图片已经在页面中加载。

// 获取图片元素
var img = document.querySelector('img');

// 获取图片的宽度和高度
var width = window.getComputedStyle(img).width;
var height = window.getComputedStyle(img).height;

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

这种方法的优势在于不需要等待图片加载，但缺点是它依赖于 CSS 样式，如果图片的样式被修改，获取到的尺寸可能不准确。

方法三：使用 canvas 元素

使用 canvas 元素也可以获取图片的尺寸。这种方法需要将图片绘制到 canvas 上，然后读取 canvas 的宽度和高度。

// 创建 canvas 元素
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

// 创建 Image 对象
var img = new Image();
img.src = '图片的 URL';

// 图片加载完成后，绘制到 canvas 上
img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);

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

这种方法的优势在于可以获取到图片的原始尺寸，不受 CSS 样式的影响。

总结

以上三种方法都可以用来获取图片的尺寸，具体使用哪种方法取决于你的需求。如果你只需要获取图片的尺寸，而不需要其他操作，可以使用第一种方法；如果你需要确保获取到准确的尺寸，可以使用第三种方法。希望这篇文章能帮助你轻松获取图片的尺寸。

-- 展开阅读全文 --