js怎么读取图片的大小

通过JavaScript读取图片大小的方法有以下几种：使用File对象、Image对象、HTML5 Canvas。最常用的方法是通过Image对象获取图片的宽度和高度。

一、使用`File`对象

在处理用户上传的图片时，可以使用File对象。通过File API获取文件的大小和元数据。

1、获取文件大小

document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        console.log(`File size: ${file.size} bytes`);
    }
});

这个方法适用于需要获取文件的物理大小（字节数）而不是图片的宽度和高度。

二、使用`Image`对象

通过创建一个Image对象并加载图片，可以获取图片的宽度和高度。

1、通过URL加载图片

const img = new Image();
img.onload = function() {
    console.log(`Image width: ${this.width}px, height: ${this.height}px`);
}
img.src = 'path/to/your/image.jpg';

2、通过用户上传的文件读取图片尺寸

document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
        const img = new Image();
        img.onload = function() {
            console.log(`Image width: ${this.width}px, height: ${this.height}px`);
        }
        img.src = e.target.result;
    }
    reader.readAsDataURL(file);
});

三、使用HTML5 Canvas

Canvas可以用来绘制和操作图像，并且可以从Canvas中提取图片的宽度和高度。

1、通过URL加载图片并绘制到Canvas

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    console.log(`Image width: ${img.width}px, height: ${img.height}px`);
}
img.src = 'path/to/your/image.jpg';

2、通过用户上传的文件绘制到Canvas

document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
        const img = new Image();
        img.onload = function() {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            console.log(`Image width: ${img.width}px, height: ${img.height}px`);
        }
        img.src = e.target.result;
    }
    reader.readAsDataURL(file);
});

四、比较与选择合适的方法

不同的方法适用于不同的场景：当需要获取文件的物理大小时，使用File对象；当需要获取图片的宽度和高度时，使用Image对象或Canvas。Image对象较为简单直接，适合大部分场景，而Canvas则适用于需要对图片进行进一步处理的情况。

这些方法不仅可以满足获取图片尺寸的需求，还可以为后续的图片处理操作奠定基础。根据实际需求选择合适的方法，可以提高代码的效率和可维护性。