js判断图片加载完成后获取图片实际宽高的方法

想要获取图片元素的实际宽高，必须先确保该图片已经加载完成。否则获取到的宽高可能是错误的。下面是获取图片实际宽高的步骤和方法：

步骤

1. 创建一个 Image 实例。

2. 设置 Image 实例的 src 属性为图片文件路径。

3. 监听 Image 实例的 load 事件。当该事件触发后，则表明图片已经加载完成。

4. 在 load 事件回调函数中获取图片的实际宽高。

示例 1

const img = new Image();
img.src = 'https://example.com/image.jpg';

img.addEventListener('load', (e) => {
  console.log('图片加载完成');
  console.log('宽度：', e.target.width);
  console.log('高度：', e.target.height);
});

以上代码将创建一个 Image 实例并将其 src 属性设置为 'https://example.com/image.jpg'。在 load 事件回调函数中，我们可以通过 event.target 属性来获取到 Image 实例本身，从而获取到图片的实际宽高。

示例 2

const img = new Image();
img.src = 'https://example.com/image.jpg';

function getImageSize(imgUrl) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = imgUrl;
    img.addEventListener('load', () => {
      resolve({
        width: img.width,
        height: img.height,
      });
    });
    img.addEventListener('error', () => {
      reject('图片加载失败');
    });
  });
}

getImageSize('https://example.com/image.jpg')
  .then((size) => {
    console.log(`宽度：${size.width}，高度：${size.height}`);
  })
  .catch((e) => {
    console.error(e);
  });

以上代码定义了一个名为 getImageSize 的函数，并将其设置为 Promise。当调用 getImageSize 函数时，该函数将创建一个 Image 实例并将其 src 属性设置为传入的图片路径。当图片加载完成后，该函数将返回一个包含图片实际宽高的对象。在需要使用图片实际宽高的地方，可以通过调用 getImageSize 函数并使用 .then() 方法来获取到该对象。同时，该函数还处理了一些异常情况，当图片加载失败时，将会返回一个错误信息。