JS 实现获取网络图片大小：代码示例与注意事项

要在 JavaScript 中获取网络图片的大小，可以通过创建一个 `Image` 对象来加载图片，同时使用 `fetch` 方法获取图片的响应头信息，从响应头中提取图片的大小。以下是示例代码： ```javascript function getImageSize(url) { // 创建一个 Promise 对象，用于异步操作 return new Promise((resolve, reject) => { // 使用 fetch 方法获取图片的响应 fetch(url) .then(response => { // 检查响应是否成功 if (!response.ok) { throw new Error('Network response was not ok'); } // 从响应头中获取图片的大小，单位为字节 const size = response.headers.get('content-length'); // 解析为数字 const imageSize = parseInt(size, 10); // 创建一个 Image 对象 const img = new Image(); // 监听图片加载成功事件 img.onload = () => { // 解析完成后将图片的宽度、高度和大小作为结果返回 resolve({ width: img.width, height: img.height, size: imageSize }); }; // 监听图片加载失败事件 img.onerror = () => { // 加载失败时抛出错误 reject(new Error('Failed to load image')); }; // 设置图片的源为传入的 URL img.src = url; }) .catch(error => { // 捕获并抛出错误 reject(error); }); }); } // 示例使用 const imageUrl = 'https://example.com/image.jpg'; getImageSize(imageUrl) .then(sizeInfo => { console.log('图片宽度:', sizeInfo.width); console.log('图片高度:', sizeInfo.height); console.log('图片大小:', sizeInfo.size, '字节'); }) .catch(error => { console.error('获取图片大小失败:', error); }); ``` 代码注释已经添加到每一步操作中，解释了代码的功能和目的。这个函数返回一个 Promise 对象，在图片加载成功后解析出图片的宽度、高度和大小。 我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 网络请求可能失败，要确保在 `fetch` 请求和图片加载时都进行错误处理。 2. 不同的服务器可能不会在响应头中提供 `content-length` 字段，这时候获取的图片大小可能为 `null`。 3. 跨域问题可能会导致 `fetch` 请求失败或图片加载失败，需要确保服务器配置了正确的 CORS 策略。 ######[AI写代码神器 | 608点数解答 | 2025-08-13 14:31:12]