js如何获取一张图片的大小

通过JavaScript获取一张图片的大小，可以使用Image对象、FileReader API、以及URL对象。这些方法允许你在不加载整个页面的情况下获取图片的宽度和高度，文件大小等属性。最直接的方法是使用Image对象，并监听其onload事件。

例如，可以使用以下代码来获取图片的宽度和高度：

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

这种方法简单且高效，适用于需要快速获取图片尺寸的场景。接下来，我们将详细讨论其他方法以及它们的适用场景。

一、通过Image对象获取图片大小

使用Image对象是获取图片大小的最常见方法。Image对象可以加载图片并触发onload事件，在事件中可以访问图片的宽度和高度属性。

使用Image对象

首先，创建一个新的Image对象，并设置其src属性为图片的URL。然后，在onload事件中访问图片的宽度和高度。

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

这种方法非常简单，而且不需要依赖任何额外的库。但需要注意的是，图片必须来自同源，否则会受到跨域限制。

处理跨域图片

如果图片来自不同的域名，可以使用crossOrigin属性来处理跨域请求。

const img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
    console.log(`Width: ${img.width}, Height: ${img.height}`);
};
img.src = 'https://example.com/path/to/image.jpg';

这种方式可以解决大部分跨域问题，但如果服务器没有设置合适的CORS头部，仍然会失败。

二、通过FileReader API获取图片大小

当图片是通过文件输入表单上传时，可以使用FileReader API来读取图片文件，并获取其大小。

使用FileReader API

首先，通过文件输入表单获取文件对象，然后使用FileReader API读取文件数据，并在读取完成后创建一个Image对象来获取图片尺寸。

<input type="file" id="fileInput">
<script>
    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(`Width: ${img.width}, Height: ${img.height}`);
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    });
</script>

这种方法适用于用户上传图片的场景，可以方便地获取图片的尺寸信息。

三、通过URL对象获取图片大小

URL.createObjectURL方法可以将文件对象转换为一个临时的URL，用于在Image对象中加载图片。

使用URL对象

首先，通过文件输入表单获取文件对象，然后使用URL.createObjectURL方法生成一个临时URL，并将其赋值给Image对象的src属性。

<input type="file" id="fileInput">
<script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
        const file = event.target.files[0];
        const img = new Image();
        img.onload = function() {
            console.log(`Width: ${img.width}, Height: ${img.height}`);
            URL.revokeObjectURL(img.src); // 释放URL对象
        };
        img.src = URL.createObjectURL(file);
    });
</script>

这种方法相比于FileReader更为高效，因为它不需要将文件数据读取到内存中。

四、获取图片文件大小

除了获取图片的宽度和高度，有时还需要获取图片文件的大小（即字节数）。可以通过文件对象的size属性来获取。

获取文件大小

当图片是通过文件输入表单上传时，可以直接访问文件对象的size属性来获取文件大小。

<input type="file" id="fileInput">
<script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
        const file = event.target.files[0];
        console.log(`File size: ${file.size} bytes`);
    });
</script>

这种方法非常直观，可以直接获取文件的大小信息。

五、使用第三方库

有时候，使用第三方库可以简化代码并提高开发效率。以下是几个常用的JavaScript库，可以帮助处理图片大小问题。

使用Lodash

Lodash是一个流行的JavaScript工具库，提供了许多有用的函数。虽然Lodash本身不直接提供获取图片大小的功能，但可以与其他方法结合使用。

const _ = require('lodash');
const img = new Image();
img.onload = _.once(function() {
    console.log(`Width: ${img.width}, Height: ${img.height}`);
});
img.src = 'path/to/image.jpg';

通过使用Lodash的once函数，可以确保onload事件处理程序只执行一次。

使用jQuery

jQuery是另一个流行的JavaScript库，可以简化DOM操作和事件处理。虽然jQuery本身也不直接提供获取图片大小的功能，但可以与其他方法结合使用。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        const img = new Image();
        $(img).on('load', function() {
            console.log(`Width: ${img.width}, Height: ${img.height}`);
        });
        img.src = 'path/to/image.jpg';
    });
</script>

通过使用jQuery的事件绑定方法，可以更简洁地处理onload事件。

六、总结

获取图片大小是一个常见的需求，可以通过多种方法实现。最常见的方法是使用Image对象，它简单且高效，适用于大多数场景。当图片是通过文件输入表单上传时，可以使用FileReader API或URL对象，这两种方法各有优劣，选择时可以根据具体需求和性能考虑。此外，还可以使用第三方库如Lodash和jQuery，以简化代码并提高开发效率。

无论选择哪种方法，关键在于理解它们的工作原理和适用场景，并根据实际需求做出最佳选择。希望这篇文章能帮助你更好地掌握如何通过JavaScript获取图片的大小。