如何用JavaScript获取页面图片大小

要准确获取图片的尺寸，关键在于等待图片加载完成。无论是获取图片的原始大小（naturalWidth 和 naturalHeight），还是它在页面中实际渲染后的大小（offsetWidth 和 offsetHeight），都不能在 DOM 刚加载完毕时立即读取。此时图片可能仍在加载中，读取到的结果往往是 0 或默认值。

等待图片加载完成后再获取尺寸

最可靠的方法是监听 load 事件。此方法对已在 DOM 中的 元素有效，对动态创建的图片同样适用。

• 对于已有的图片，为其绑定 load 事件，在回调函数中即可安全读取 naturalWidth 和 naturalHeight。
• 需要注意：如果图片已被浏览器缓存，load 事件可能会同步触发。因此建议先检查 complete 属性——若返回 true，则直接读取尺寸，无需等待事件。
• 动态创建图片时，顺序很重要：必须先设置 src，再绑定 load 事件。否则，在图片已缓存的情况下，很容易错过事件回调。

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

若想知道图片在页面中实际占用的空间——例如被 CSS 缩放或容器限制——则需要使用布局相关属性。

• offsetWidth / offsetHeight：最常用的属性，包含 padding 和 border 的可见尺寸，能直接反映图片“看起来有多大”。
• clientWidth / clientHeight：内容区的尺寸，不含 border 和滚动条，表示内容框的大小。
• getBoundingClientRect()：需要更高精度时使用，例如处理小数位尺寸，或获取图片相对于视口的精确位置。
• 注意：这些值仅在图片渲染完成后才有效。若担心时机问题，可配合 requestAnimationFrame 确保元素已挂载且可见。

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

当页面中图片数量较多时，逐个监听 load 事件可能影响性能。以下优化思路可供参考：

• 使用 document.querySelectorAll('img') 一次性抓取所有图片，然后遍历处理。
• 为每个图片添加标记，例如 data-loaded="true"，避免重复绑定事件或重复读取尺寸。
• 对于懒加载图片，情况稍复杂：不能指望图片一进入视口就获取尺寸。应借助 IntersectionObserver 触发加载，待图片的 src 真正设置并加载完成后，再读取尺寸。
• 若需统一处理多个图片的加载完成时机，可考虑使用 Promise.all 将各图片的加载过程包装起来，等所有图片就绪后统一响应。

注意跨域图片的限制

跨域图片需要特别留意。读取 naturalWidth 和 naturalHeight 通常不受影响，但某些浏览器在严格模式下可能返回 0。更关键的是，若后续需将图片绘制到 canvas 上，跨域且未声明的情况下会直接抛出安全错误。

• 如果图片服务支持 CORS，可在 img 标签上设置 crossOrigin="anonymous"。
• 设置 crossOrigin 后，服务端必须返回正确的 Access-Control-Allow-Origin 头，否则图片加载会失败。
• 若不设置 crossOrigin，获取尺寸基本无问题，但无法将图片用于 canvas。