图片加载完成前无法获取真实宽高，必须等待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 预览本地图片时怎么拿尺寸
用户通过 <input type="file"> 选图后，需先生成临时 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 完全不受样式影响，始终等于图片原始像素值。但要注意混淆点：
根据ui图生成前端页面
下载
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
立即学习“前端免费学习笔记（深入）”；
-
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 响应内容不一致 —— 这类问题只能靠服务端埋点或响应头校验来排查。
