在前端开发中，我们经常需要获取图片的真实尺寸，比如展示图片时需要按照原图比例缩放，或者对于响应式布局中，需要根据图片宽高比动态调整容器大小。
然而，获取图片的真实尺寸并不是一件简单的事情，特别是在 Safari 和 Chrome 浏览器中。因为 WebKit 内核中的浏览器会将图片加载到缓存中，并使用缓存来显示图片，这意味着通过 JavaScript 获取到的图片宽高可能会受到缓存的影响而不准确。
接下来，我们将介绍如何使用 JavaScript 获取图片的真实宽度和高度，同时解决 WebKit 内核浏览器中的缓存问题。
方法
方法一：使用 naturalWidth 和 naturalHeight
HTML 的 img 元素提供了两个属性：naturalWidth 和 naturalHeight，分别用于获取图片的真实宽度和高度。这两个属性可以跨越缓存，获取图片加载完成后的真实尺寸。
<img id="myImg" src="example.jpg">
const img = document.getElementById('myImg');
const width = img.naturalWidth;
const height = img.naturalHeight;
console.log(`Image width: ${width}, height: ${height}`);这种方法非常简单，适用于大多数情况，特别是在图片已经加载完成并且仅需要获取一次真实尺寸时。但是请注意，如果图片尚未加载完成，则会返回 0，并且该方法不适用于使用 CSS 调整图像大小的情况。
方法二：创建一个新的 Image 对象
另一种获取图片真实尺寸的方法是创建一个新的 Image 对象，并将图片的 URL 赋值给 src 属性。然后，在 onload 事件中获取宽度和高度属性。由于新创建的对象不受缓存影响，因此可以保证获取到的是图片的真实尺寸。
-- -------------------- ---- ------- ----- --- - --- -------- ---------- - ---------- - ----- ----- - ----------- ----- ------ - ------------ ------------------ ------ --------- ------- ------------ - ------- - --------------
这种方法更加通用，适用于所有情况，即使在图片可能被缓存的情况下也可以正常工作。但是，请注意在代码中必须等待 onload 事件触发之后才能获取宽高属性。
示例代码
<img id="myImg" src="example.jpg">
-- -------------------- ---- ------- -- --- ----- ---- - --------------------------------- ----- ------ - ------------------ ----- ------- - ------------------- ------------------- -- ----- ------ ---------- ------- ------------- -- --- ----- ---- - --- -------- ----------- - ---------- - ----- ------ - ----------- ----- ------- - ------------ ------------------- -- ----- ------ ---------- ------- ------------- - -------- - --------------
结论
以上两种方法都可以用于获取图片的真实宽度和高度，但具体使用哪种方法取决于您的具体需求。如果您确定图片已经加载完成并且只需要获取一次真实尺寸，则可以使用第一种方法。另一方面，如果您需要在确保获取到正确尺寸的情况下进行其他操作，则可以使用第二种方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8692