[程序员] 前端 javascript 如何获取图片的宽高?

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

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