html5怎么检测图片尺寸_html5获取宽高方法【技巧】

图片加载完成前无法获取真实宽高，必须等待load事件触发后读取naturalWidth/naturalHeight属性，它们不受css影响且唯一可靠反映原始像素尺寸。

图片加载完成前无法获取真实宽高

直接读取 img.width 或 img.height 属性，返回的往往是 0、默认值或 CSS 设置的尺寸，不是原始图片的实际像素尺寸。这是因为 dom 加载时图片可能还没解码完成，浏览器尚未解析其内在元数据。

必须等 load 事件触发后才能安全读取：

const img = new Image(); img.src = 'photo.jpg'; img.onload = () => {   console.log(img.naturalWidth, img.naturalHeight); // ✅ 正确：原始尺寸   console.log(img.width, img.height);               // ⚠️ 可能被 CSS 或 width/height 属性覆盖 };

• naturalWidth/naturalHeight 是唯一可靠反映图片文件本身分辨率的属性
• 如果图片已缓存，onload 仍会触发，但可能异步延迟极短；不能省略监听
• 若需兼容 IE8–9，naturalWidth 不可用，只能降级用 onload + offsetWidth（不推荐，失真）

用 URL.createObjectURL 预览本地图片时怎么拿尺寸

用户通过 选图后，需先生成临时 URL，再创建 Image 实例加载 —— 这个过程不能跳过，否则无法触发 load。

fileInput.addEventListener('change', e => {   const file = e.target.files[0];   const url = URL.createObjectURL(file);   const img = new Image();   img.onload = () => {     console.log(img.naturalWidth, img.naturalHeight);     URL.revokeObjectURL(url); // ✅ 记得释放内存   };   img.src = url; // 必须赋值后才开始加载 });

• 不要试图从 File 对象直接读宽高 —— 它没有该信息
• URL.createObjectURL 创建的是引用，不用 revoke 会导致内存泄漏
• 大图加载慢，可加 img.onerror 处理损坏文件

CSS 缩放、object-fit 会影响 naturalWidth 吗

不会。naturalWidth 和 naturalHeight 完全不受样式影响，始终等于图片原始像素值。但要注意混淆点：

立即学习“前端免费学习笔记（深入）”；

• img.width/img.height 属性（html 属性或 js 设置的）会覆盖渲染尺寸，但不改 natural*
• getBoundingClientRect() 返回的是当前渲染区域大小，含缩放、transform、object-fit 裁剪效果
• 需要“显示区域实际像素”？得结合 window.devicePixelRatio 换算：rect.width * window.devicePixelRatio

批量检测多张图片宽高时的性能注意点

频繁创建 Image 实例并监听 load 没问题，但若图片量大（如 >50 张），建议控制并发数，避免阻塞主线程或触发浏览器资源限制。

• 用 promise.allSettled 包装一批图片加载任务，便于统一处理成功/失败
• 避免在循环里重复写 img.onload = ...，闭包容易捕获错变量；推荐用立即执行函数或 for...of + let
• 服务端已知尺寸？优先用 API 返回的 width/height 字段，比前端重载一遍更稳更快

真正容易被忽略的是：某些 cdn 或代理会动态压缩图片并修改响应头，导致 naturalWidth 和 http 响应内容不一致 —— 这类问题只能靠服务端埋点或响应头校验来排查。