正文

轻松掌握：JavaScript快速获取图片尺寸的5种方法

/0 浏览量
1014

在网页开发中，有时候我们需要获取图片的尺寸信息，以便进行布局调整、图片显示控制等操作。JavaScript 提供了多种方法来获取图片尺寸，以下将详细介绍五种常用的方法。

方法一：使用 Image 对象

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

function getImageSize(url, callback) {
    var img = new Image();
    img.onload = function() {
        callback(null, { width: img.width, height: img.height });
    };
    img.onerror = function() {
        callback(new Error('图片加载失败'));
    };
    img.src = url;
}

// 使用示例
getImageSize('https://example.com/image.jpg', function(err, size) {
    if (err) {
        console.error(err);
    } else {
        console.log('图片尺寸：', size.width, 'x', size.height);
    }
});

方法二：使用 fetch API

使用 fetch API 可以获取图片的响应体，然后解析为 Blob 对象，再使用 URL.createObjectURL() 创建一个临时 URL，最后创建一个 Image 对象来获取尺寸。

function getImageSize(url, callback) {
    fetch(url)
        .then(response => response.blob())
        .then(blob => {
            const objectUrl = URL.createObjectURL(blob);
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.onload = () => {
                    resolve({ width: img.width, height: img.height });
                };
                img.onerror = reject;
                img.src = objectUrl;
            });
        })
        .then(size => callback(null, size))
        .catch(err => callback(err));
}

// 使用示例
getImageSize('https://example.com/image.jpg', function(err, size) {
    if (err) {
        console.error(err);
    } else {
        console.log('图片尺寸：', size.width, 'x', size.height);
    }
});

方法三：使用 URL.createObjectURL() 和 Image

与第二种方法类似，直接使用 URL.createObjectURL() 创建一个临时 URL，然后创建 Image 对象获取尺寸。

function getImageSize(url, callback) {
    const objectUrl = URL.createObjectURL(new Blob([fetch(url).then(response => response.blob())]));
    const img = new Image();
    img.onload = () => {
        callback(null, { width: img.width, height: img.height });
    };
    img.onerror = () => {
        callback(new Error('图片加载失败'));
    };
    img.src = objectUrl;
}

// 使用示例
getImageSize('https://example.com/image.jpg', function(err, size) {
    if (err) {
        console.error(err);
    } else {
        console.log('图片尺寸：', size.width, 'x', size.height);
    }
});

方法四：使用 FileReader 和 Image

通过 FileReader 读取图片文件，然后创建 Image 对象获取尺寸。

function getImageSize(file, callback) {
    const reader = new FileReader();
    reader.onload = function(e) {
        const img = new Image();
        img.onload = () => {
            callback(null, { width: img.width, height: img.height });
        };
        img.onerror = () => {
            callback(new Error('图片加载失败'));
        };
        img.src = e.target.result;
    };
    reader.onerror = () => {
        callback(new Error('文件读取失败'));
    };
    reader.readAsDataURL(file);
}

// 使用示例
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    getImageSize(file, function(err, size) {
        if (err) {
            console.error(err);
        } else {
            console.log('图片尺寸：', size.width, 'x', size.height);
        }
    });
});

方法五：使用 canvas 和 Image

通过创建一个 canvas 元素，将图片绘制到 canvas 上，然后读取 canvas 的宽度和高度来获取图片尺寸。

function getImageSize(url, callback) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();
    img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        callback(null, { width: canvas.width, height: canvas.height });
    };
    img.onerror = () => {
        callback(new Error('图片加载失败'));
    };
    img.src = url;
}

// 使用示例
getImageSize('https://example.com/image.jpg', function(err, size) {
    if (err) {
        console.error(err);
    } else {
        console.log('图片尺寸：', size.width, 'x', size.height);
    }
});

以上五种方法都可以获取图片尺寸，具体使用哪种方法取决于你的实际需求。希望这篇文章能帮助你轻松掌握 JavaScript 获取图片尺寸的技巧。

-- 展开阅读全文 --