正文

掌握JS截取图片大小，轻松实现图片尺寸获取

/0 浏览量
0401

在网页开发中，经常需要获取图片的尺寸信息，以便进行布局调整、图片展示优化等操作。JavaScript 提供了多种方法来截取图片大小，以下是一些简单实用的方法，帮助你轻松实现图片尺寸的获取。

1. 使用 HTMLImageElement 的 naturalWidth 和 naturalHeight 属性

HTML5 规范中为 HTMLImageElement 对象增加了 naturalWidth 和 naturalHeight 属性，可以直接获取图片的原始尺寸。

// 创建一个新的 Image 对象
var img = new Image();

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

// 监听图片加载完成事件
img.onload = function() {
    // 获取图片的宽度和高度
    var width = img.naturalWidth;
    var height = img.naturalHeight;

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

// 监听图片加载失败事件
img.onerror = function() {
    console.log('图片加载失败！');
};

2. 使用 Canvas 绘制图片并获取尺寸

如果需要获取图片的精确尺寸，可以使用 Canvas 绘制图片，然后通过 Canvas 的宽度和高度属性来获取。

// 创建一个新的 Image 对象
var img = new Image();

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

// 创建一个新的 Canvas 对象
var canvas = document.createElement('canvas');

// 监听图片加载完成事件
img.onload = function() {
    // 设置 Canvas 的宽度和高度
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;

    // 使用 2D 绘图上下文绘制图片
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    // 获取图片的宽度和高度
    var width = canvas.width;
    var height = canvas.height;

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

// 监听图片加载失败事件
img.onerror = function() {
    console.log('图片加载失败！');
};

3. 使用 CSS 获取图片尺寸

如果只是想获取图片的显示尺寸（即调整后的尺寸），可以使用 CSS 的 width 和 height 属性。

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

// 获取图片的宽度和高度
var width = img.clientWidth;
var height = img.clientHeight;

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

总结

以上三种方法都可以用来获取图片尺寸，具体使用哪种方法取决于你的需求。如果你只需要获取图片的原始尺寸，可以使用 naturalWidth 和 naturalHeight 属性；如果你需要获取图片的精确尺寸，可以使用 Canvas 绘制图片；如果你只需要获取图片的显示尺寸，可以使用 CSS 的 width 和 height 属性。希望这些方法能帮助你轻松实现图片尺寸的获取。

-- 展开阅读全文 --