js中用来获取图片的实际尺寸的naturalWidth和 naturalHeight使用记录

naturalWidth 和 naturalHeight 是 HTMLImageElement 对象的属性，用于获取或设置图像的原始尺寸。这些属性在处理图像时非常有用，尤其是在需要知道图像的物理尺寸而不仅仅是在页面上呈现的尺寸时。以下是关于这两个属性的一些关键点总结：

1. 属性定义:

   • naturalWidth: 表示图像的原始宽度（以像素为单位）。
   • naturalHeight: 表示图像的原始高度（以像素为单位）。

2. 与其它尺寸属性的区别:

   • width 和 height 属性通常表示图像在页面中的显示尺寸，这可能因样式设置（如 CSS 的 width 和 height 属性）而改变。
   • clientWidth 和 clientHeight 属性表示元素的内容区域尺寸，包括内边距（padding），但不包括边框、外边距（margin）和其他滚动条。
   • scrollWidth 和 scrollHeight 属性表示元素的整体尺寸，包括由于溢出被隐藏的部分。

3. 使用场景:

   • 当你需要获取或设置图像的实际尺寸时，使用 naturalWidth 和 naturalHeight。
   • 当你需要获取图像在页面上渲染的尺寸时，使用 width 和 height。

4. 不变性:

   • naturalWidth 和 naturalHeight 不会因为 CSS 的缩放、转换或其他影响渲染尺寸的样式而改变。

5. 兼容性:

   • 所有现代浏览器都支持 naturalWidth 和 naturalHeight，但在一些较旧的浏览器中可能不受支持。

6. 性能考虑:

   • 访问 naturalWidth 和 naturalHeight 通常不会触发新的图像加载，因为这些值在图像加载完成时就已经确定了。

7. 示例代码:

   var img = document.querySelector('img'); // 选择页面上的某个图像元素
   var originalWidth = img.naturalWidth; // 获取图像的原始宽度
   var originalHeight = img.naturalHeight; // 获取图像的原始高度
   
   console.log('Original image dimensions:', originalWidth, 'x', originalHeight);
   

8. 注意事项:

   • 如果图像未加载完成，naturalWidth 和 naturalHeight 可能会返回 0。因此，确保在图像的 onload 事件处理函数中或在确保图像已经加载的情况下使用这些属性。

通过了解 naturalWidth 和 naturalHeight 属性，你可以更准确地处理图像数据，尤其是在需要知道图像的物理尺寸时，这些属性提供了重要的信息。