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

在前端开发中，你可以使用JavaScript的HTML5 File API和Image对象来获取图片的原始宽度和高度。以下是一个示例方法，它接受一个文件对象（例如，从<input type="file">元素获取的文件）并返回一个Promise，该Promise在解析时提供图片的原始宽度和高度：

function getImageDimensions(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function(event) {
      const img = new Image();
      img.onload = function() {
        resolve({ width: img.width, height: img.height });
      };
      img.onerror = function() {
        reject(new Error('无法加载图片'));
      };
      img.src = event.target.result;
    };
    reader.onerror = function() {
      reject(new Error('无法读取文件'));
    };
    reader.readAsDataURL(file);
  });
}

你可以这样使用这个方法：

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (event) => {
  const file = event.target.files[0];
  if (file) {
    try {
      const dimensions = await getImageDimensions(file);
      console.log('图片宽度:', dimensions.width);
      console.log('图片高度:', dimensions.height);
    } catch (error) {
      console.error('获取图片尺寸时出错:', error);
    }
  }
});

这段代码首先创建一个FileReader对象来读取用户选择的文件。当文件读取完成时，它创建一个新的Image对象，并将其src属性设置为读取到的数据URL。然后，它等待图片加载完成，并解析包含图片宽度和高度的Promise。如果在任何步骤中出现错误，Promise将被拒绝，并返回一个错误消息。