前端获取图片尺寸方法

背景：项目内页面图片需要显示图片宽高

一、获取图片尺寸的方法

// 传入图片url，返回图片尺寸
export function getImageSize(url) {
  return new Promise((resolve) => {
    const img = new Image()
    img.src = url
    if (img.complete) {
      // 如果图片被缓存，则直接返回缓存数据
      resolve({ width: img.width, height: img.height })
    } else {
      img.onload = () => {
        resolve({ width: img.width, height: img.height })
      }
    }
  })
}

img.complete: complete 属性可返回浏览器是否已完成对图像的加载。如果加载完成，则返回 true，否则返回 fasle。

img.onload: onload 事件在图片加载完成后立即执行。

二、调用getImageSize方法

getImageSize(el.src).then(sizeInfo => {
    const { width, height } = sizeInfo
    console.log('width, height: ', width, height);
})