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

V2EX = way to explore

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

For Existing Member Sign In

请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 1370 days ago, the information mentioned may be changed or developed.

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

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 replies

toesbieya

Jul 30, 2022

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

CHCH

Jul 30, 2022

resolve 会立马运行吧

Zzzz77

Jul 30, 2022

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