如何利用 JavaScript 获取页面中图像尺寸

要获取页面中图像的大小，必须等图片加载完成后再读取 naturalWidth/naturalHeight（原始尺寸）或 offsetWidth/offsetHeight（渲染尺寸）；直接在 DOM 加载后读取可能返回 0；推荐监听 load 事件，并检查 complete 属性；动态创建图片时需先设 src 再绑定 load；渲染尺寸可用 offsetWidth/offsetHeight、clientWidth/clientHeight 或 getBoundingClientRect()；批量处理应标记已加载并结合 IntersectionObserver 处理懒加载；跨域图片需设置 crossOrigin="anonymous" 并确保服务端支持 CORS，否则 canvas 操作将失败。

要获取页面中图像的大小，核心是等图片加载完成后再读取其 naturalWidth 和 naturalHeight（原始尺寸）或 offsetWidth/offsetHeight（渲染后尺寸）。直接在 DOM 加载后立即读取，很可能拿到 0 或默认值，因为图片可能还没加载完。

监听图片加载完成再获取尺寸

最可靠的方式是监听 load 事件。适用于已存在于 DOM 中的 <img> 元素，也适用于动态创建的图片：

• 对已有图片：给 img 元素绑定 load 事件，回调中读取 naturalWidth 和 naturalHeight
• 如果图片已缓存，load 可能同步触发，所以建议先检查 complete 属性：if (img.complete) { /* 直接读取 */ }
• 动态创建图片时，务必先设置 src，再绑定 load，否则可能错过事件（尤其缓存场景）

获取渲染后的实际显示尺寸

若需知道图片在页面中实际占用的空间（比如被 CSS 缩放、容器限制等情况），应使用布局相关属性：

• offsetWidth / offsetHeight：包含 padding 和 border 的可见尺寸，最常用
• clientWidth / clientHeight：内容区尺寸（不含 border、scrollbar）
• getBoundingClientRect()：返回精确的视口坐标和尺寸，含小数，适合需要高精度的场景
• 注意：这些值只有在图片完成渲染后才有效，可配合 requestAnimationFrame 或 offsetParent 检查确保元素已挂载并可见

批量处理多个图片并避免重复计算

当页面有大量图片时，逐个监听 load 容易造成性能压力，可用以下方式优化：

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

• 用 document.querySelectorAll('img') 获取所有图片，遍历并统一处理
• 为每个图片添加 data-loaded="true" 等标记，防止重复绑定或重复读取
• 对懒加载图片，需监听 IntersectionObserver 触发后，再设置 src 并等待 load，不能仅靠进入视口就假设尺寸已知
• 考虑使用 Promise.all 包裹多个图片的加载过程，便于统一响应

注意跨域图片的限制

当图片来自不同源且未设置 crossOrigin 属性时，读取 naturalWidth/naturalHeight 一般不受影响，但某些浏览器在严格模式下可能返回 0；更关键的是，如果后续要用 canvas 绘制该图，跨域未声明会导致安全错误：

• 若图片支持 CORS，可在 img 上设置 crossOrigin="anonymous"
• 设置后需确保服务端返回正确的 Access-Control-Allow-Origin 头，否则加载会失败
• 不设置 crossOrigin 时，仍可获取尺寸，但无法用于 canvas 操作