正文

轻松学会JS获取图片尺寸，告别图片未知大小烦恼

/0 浏览量
0411

在网页开发中，我们经常会遇到需要显示图片的场景。然而，有时候我们并不知道图片的确切尺寸，这可能会给我们的布局和设计带来困扰。别担心，今天我将教你如何使用JavaScript轻松获取图片尺寸，让你告别图片未知大小的烦恼。

一、使用Image对象获取图片尺寸

JavaScript提供了一个Image对象，我们可以通过这个对象来获取图片的尺寸信息。以下是一个简单的示例：

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

// 设置图片的src属性
img.src = 'path/to/your/image.jpg';

// 监听图片加载完成事件
img.onload = function() {
    // 获取图片的宽度和高度
    var width = img.width;
    var height = img.height;
    console.log('图片宽度：' + width + 'px');
    console.log('图片高度：' + height + 'px');
};

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

在这个示例中，我们首先创建了一个Image对象，并设置了其src属性为图片的路径。然后，我们监听图片的onload事件，在图片加载完成后，我们可以通过img.width和img.height属性获取到图片的宽度和高度。

二、使用URL.createObjectURL()获取图片尺寸

如果你需要获取用户上传的图片尺寸，可以使用URL.createObjectURL()方法来创建一个临时的URL，然后使用Image对象来获取尺寸信息。

以下是一个示例：

// 获取文件输入元素
var fileInput = document.getElementById('fileInput');

// 监听文件选择事件
fileInput.addEventListener('change', function(e) {
    var file = e.target.files[0];
    if (file) {
        // 创建一个临时的URL
        var url = URL.createObjectURL(file);

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

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

        // 监听图片加载完成事件
        img.onload = function() {
            // 获取图片的宽度和高度
            var width = img.width;
            var height = img.height;
            console.log('图片宽度：' + width + 'px');
            console.log('图片高度：' + height + 'px');
        };

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

在这个示例中，我们首先获取了文件输入元素，并监听其change事件。当用户选择文件后，我们使用URL.createObjectURL()方法创建了一个临时的URL，并创建了一个Image对象来获取图片尺寸。

三、使用fetch()和Blob获取图片尺寸

如果你需要从服务器获取图片，可以使用fetch()方法和Blob对象来获取图片尺寸。

以下是一个示例：

// 获取图片的URL
var imageUrl = 'path/to/your/image.jpg';

// 使用fetch()方法获取图片数据
fetch(imageUrl)
    .then(function(response) {
        return response.blob();
    })
    .then(function(blob) {
        // 创建一个URL
        var url = URL.createObjectURL(blob);

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

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

        // 监听图片加载完成事件
        img.onload = function() {
            // 获取图片的宽度和高度
            var width = img.width;
            var height = img.height;
            console.log('图片宽度：' + width + 'px');
            console.log('图片高度：' + height + 'px');
        };

        // 监听图片加载失败事件
        img.onerror = function() {
            console.log('图片加载失败');
        };
    })
    .catch(function(error) {
        console.log('获取图片数据失败：' + error);
    });

在这个示例中，我们首先获取了图片的URL，然后使用fetch()方法获取图片数据。在获取到Blob对象后，我们创建了一个临时的URL，并使用Image对象来获取图片尺寸。

通过以上方法，你可以轻松地使用JavaScript获取图片尺寸，从而更好地控制网页布局和设计。希望这篇文章能帮助你解决图片未知大小的烦恼！

-- 展开阅读全文 --