写一个方法获取图片的原始宽高

function getImageDimensions(imageUrl) {
  return new Promise((resolve, reject) => {
    const img = new Image();

    img.onload = () => {
      resolve({ width: img.naturalWidth, height: img.naturalHeight });
    };

    img.onerror = (error) => {
      reject(error);
    };

    img.src = imageUrl;
  });
}


// 使用示例:
getImageDimensions('image.jpg')
  .then(dimensions => {
    console.log('Image dimensions:', dimensions); // { width: ..., height: ... }
  })
  .catch(error => {
    console.error('Error loading image:', error);
  });


//  更简洁的 async/await 版本:

async function getDimensionsAsync(imageUrl) {
  try {
    const img = new Image();
    img.src = imageUrl;
    await new Promise((resolve, reject) => {
      img.onload = resolve;
      img.onerror = reject;
    });
    return { width: img.naturalWidth, height: img.naturalHeight };
  } catch (error) {
    console.error("Error loading image:", error);
    // 根据你的需求，可以抛出错误或返回默认值
    return null; // 或 throw error;
  }
}

// 使用 async/await 示例:
async function test() {
  const dimensions = await getDimensionsAsync('image.jpg');
  if (dimensions) {
    console.log('Image dimensions (async/await):', dimensions);
  }
}

test();

解释:

1. new Image(): 创建一个新的 Image 对象。这个对象表示 HTML 中的 <img> 元素，但它不会被添加到 DOM 中。

2. img.onload: 当图片加载完成时，会触发 onload 事件。我们在这个事件处理函数中获取图片的原始宽度和高度，分别通过 img.naturalWidth 和 img.naturalHeight 属性。

3. img.onerror: 如果图片加载失败（例如，URL 无效或图片损坏），会触发 onerror 事件。我们在这个事件处理函数中处理错误。

4. img.src = imageUrl: 设置图片的 URL，开始加载图片。

5. Promise: 使用 Promise 可以更优雅地处理异步操作，避免回调地狱。resolve 函数在图片加载成功时调用，reject 函数在加载失败时调用。

6. async/await: async/await 是更现代的处理异步操作的方式，使代码更简洁易读。await 关键字会暂停函数执行，直到 Promise 完成。

关键点:

• naturalWidth 和 naturalHeight: 这两个属性返回图片的原始宽度和高度，不受 CSS 样式或 HTML 属性的影响。
• 异步加载: 图片加载是异步的，这意味着代码不会阻塞，而是在图片加载完成后执行 onload 或 onerror 回调。 使用 Promise 或 async/await 可以更好地管理这种异步行为。
• 错误处理: 务必包含 onerror 处理程序来处理潜在的错误，例如图片加载失败。

这个方法适用于各种图片格式，包括 JPG、PNG、GIF 等。 选择 Promise 版本或 async/await 版本取决于你的项目和代码风格。 async/await 通常更简洁易懂。