前端 javascript 如何获取图片的宽高？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 848 天前的主题，其中的信息可能已经有所发展或是发生改变。

想要实现的效果：图片固定按原始大小显示，不随窗口缩放而变化大小。

stackoverflow 查了一番，给的方案似乎都是将图片设置为 div 的 background 这样就不会跟着变了。

但同时我的需求上还需要获取图片宽高。

使用标签的方案下，为 img 添加 onload 事件即可用 img.width 获取图片宽高。但是切换到 div-background 方案后，onload 事件需要用 eventlistener 实现，目前用的大概是下述方案：

let load_image = (src) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', resolve(img));
    img.addEventListener('error', reject(img));
    img.src = src;
  });
}

load_image(src).then((img) => {
  img_div.style.background = "url("+src+") no-repeat scroll left top transparent";
  console.log(img.width);
});

load_image('/url/to/img.jpg')

比较诡异的是 console.log(image.width);这行打印出来宽度是 0 ，理论上来说我没理解错的话这代码不是在图片 src 加载完成后才执行的回调，为啥会得到 0 的宽度呢。有啥方法获得实际宽高吗？

8 条回复

toesbieya

2022-07-30 10:01:39 +08:00

img.addEventListener('load', () => resolve(img));

CHCH

2022-07-30 10:01:44 +08:00

resolve 会立马运行吧

Zzzz77

2022-07-30 10:05:26 +08:00

```typescript
const getImageSize = (src: string) => {
return new Promise(resolve => {
const img = document.createElement('img')
img.src = src
img.style.opacity = '0'
document.body.appendChild(img)

img.onload = () => {
const imgWidth = img.clientWidth
const imgHeight = img.clientHeight

img.onload = null
img.onerror = null

document.body.removeChild(img)

resolve({ width: imgWidth, height: imgHeight })
}

img.onerror = () => {
img.onload = null
img.onerror = null
}
})
}
```