要获取页面中图像的大小，必须等图片加载完成后再读取 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 缩放、容器限制等情况），应使用布局相关属性：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
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 操作
