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

[LeeReamond]

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

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 的宽度呢。有啥方法获得实际宽高吗？

[toesbieya]

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

[CHCH]

resolve 会立马运行吧

[Zzzz77]

```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
}
})
}
```

[sutra]

naturalWidth naturalHeight

[zhuweiyou]

因为你代码写错了, () => resolve(img)

[mingdongshensen]

代码写错啦

[jinliming2]

代码错啦，事件是要给回调函数的

[LeeReamond]

@zhuweiyou
@mingdongshensen
@jinliming2
@Zzzz77
@toesbieya 谢谢，各位方案都有效