js如何获取图片宽度和高度

在JavaScript中，可以通过多种方式获取图片的宽度和高度。

一、对于已存在于HTML页面中的图片元素

1. DOM属性方式
   • 如果图片已经加载完成，可以直接通过DOM元素的width和height属性获取图片在页面上显示的实际宽度和高度（可能会受到CSS样式影响）。
   • 如果图片已经加载完成，可以直接通过DOM元素的width和height属性获取图片在页面上显示的实际宽度和高度（可能会受到CSS样式影响）。
   • 如果想要获取图片本身的原始宽度和高度（未受CSS影响），可以使用naturalWidth和naturalHeight属性。
   • 如果想要获取图片本身的原始宽度和高度（未受CSS影响），可以使用naturalWidth和naturalHeight属性。

• Image对象方式（适用于预加载图片或在JavaScript中动态创建图片对象）
  • 可以创建一个新的Image对象，设置其src属性，然后在图片加载完成后获取宽度和高度。
  • 可以创建一个新的Image对象，设置其src属性，然后在图片加载完成后获取宽度和高度。

二、优势

• 方便快捷：不需要额外的库或者复杂的操作就可以获取图片尺寸信息。
• 灵活性高：无论是已经存在于页面中的图片还是动态创建的图片都可以获取尺寸。

三、应用场景

• 图片布局调整：根据图片的实际尺寸来调整在页面中的布局，例如自适应容器大小。
• 图片裁剪或缩放：知道原始尺寸后可以根据需求进行裁剪或者按照一定比例缩放。
• 图片加载优化：如果图片尺寸过大，可以考虑在加载前进行压缩或者采用合适的加载策略。