正文

掌握JS获取图片原始尺寸的5种方法，轻松应对各种图片处理需求

/0 浏览量
0604

在网页开发中，有时候我们需要获取图片的原始尺寸信息，以便进行布局调整、图片处理或其他复杂操作。JavaScript 提供了多种方法来获取图片的原始尺寸。以下将详细介绍五种常用的方法，帮助你轻松应对各种图片处理需求。

方法一：使用 Image 对象

JavaScript 的 Image 对象可以用来加载图片，并通过其属性获取图片的尺寸。这种方法简单直接，适合在图片加载完成后获取尺寸。

function getImageSize(imageUrl, callback) {
    var img = new Image();
    img.onload = function() {
        callback(null, { width: this.width, height: this.height });
    };
    img.onerror = function() {
        callback(new Error('Cannot load image'), null);
    };
    img.src = imageUrl;
}

// 使用示例
getImageSize('path/to/image.jpg', function(err, size) {
    if (err) {
        console.error(err);
    } else {
        console.log('Image size:', size.width, 'x', size.height);
    }
});

方法二：通过 CSS 属性

通过设置图片的 CSS 属性 width 和 height，然后在图片加载完成后读取这些属性，可以获取图片的原始尺寸。

function getImageSizeByCSS(imageUrl, callback) {
    var img = new Image();
    img.onload = function() {
        callback(null, { width: this.naturalWidth, height: this.naturalHeight });
    };
    img.onerror = function() {
        callback(new Error('Cannot load image'), null);
    };
    img.src = imageUrl;
}

// 使用示例
getImageSizeByCSS('path/to/image.jpg', function(err, size) {
    if (err) {
        console.error(err);
    } else {
        console.log('Image size:', size.width, 'x', size.height);
    }
});

方法三：使用 HTML5 Canvas

HTML5 Canvas 提供了一个更灵活的方式来获取图片尺寸。你可以将图片绘制到 canvas 上，然后通过 canvas 的宽度和高度属性获取尺寸。

function getImageSizeByCanvas(imageUrl, callback) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.onload = function() {
        canvas.width = this.width;
        canvas.height = this.height;
        ctx.drawImage(this, 0, 0);
        callback(null, { width: canvas.width, height: canvas.height });
    };
    img.onerror = function() {
        callback(new Error('Cannot load image'), null);
    };
    img.src = imageUrl;
}

// 使用示例
getImageSizeByCanvas('path/to/image.jpg', function(err, size) {
    if (err) {
        console.error(err);
    } else {
        console.log('Image size:', size.width, 'x', size.height);
    }
});

方法四：使用 JavaScript 的 fetch API

fetch API 可以用来异步获取图片资源，并在获取到图片后，使用上述任何一种方法来获取尺寸。

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

// 使用示例
getImageSizeByFetch('path/to/image.jpg', function(err, size) {
    if (err) {
        console.error(err);
    } else {
        console.log('Image size:', size.width, 'x', size.height);
    }
});

方法五：利用 URL.createObjectURL 和 FileReader

如果你有图片的本地路径或者 File 对象，可以使用 URL.createObjectURL 创建一个临时 URL，然后通过 FileReader 读取图片信息来获取尺寸。

function getImageSizeByFile(imageFile, callback) {
    var url = URL.createObjectURL(imageFile);
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onload = function() {
            var img = new Image();
            img.onload = function() {
                callback(null, { width: this.width, height: this.height });
            };
            img.src = reader.result;
        };
        reader.onerror = function() {
            callback(new Error('Error reading image'), null);
        };
        reader.readAsDataURL(imageFile);
    };
    xhr.onerror = function() {
        callback(new Error('Error fetching image'), null);
    };
    xhr.open('GET', url, true);
    xhr.send();
}

// 使用示例
getImageSizeByFile(imageFile, function(err, size) {
    if (err) {
        console.error(err);
    } else {
        console.log('Image size:', size.width, 'x', size.height);
    }
});

通过以上五种方法，你可以根据实际情况选择最合适的方式来获取图片的原始尺寸。每种方法都有其适用的场景，了解并熟练运用这些方法，将有助于你在网页开发中更好地处理图片相关的问题。

-- 展开阅读全文 --