在 JavaScript 中获取图像尺寸
有时，在将图像上传到托管服务器或使用它之前，我们可能需要检查或验证图像的尺寸，即图像的高度和宽度。我们可能需要检查其尺寸以调整大小、裁剪或更改图像。
我们可以使用 JavaScript 轻松地做到这一点。
在本文中，我们将学习如何使用 JavaScript 获取图像的尺寸或检查图像的高度和宽度。
在 JavaScript 中使用 width 和 height 属性获取图像尺寸
我们可以使用 JavaScript 中的 width 和 height 属性快速获取图像的尺寸。下面的程序将向我们展示这一点。
var i = new Image();
i.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/2560px-Image_created_with_a_mobile_phone.png';
i.onload = function() {
alert(this.width + 'x' + this.height);
}
输出：
我们使用 new Image() 构造函数在上面的程序中创建了一个图像对象。然后，Image() 构造函数创建了一个新的图像元素实例。
然后使用图像 URL 源添加 i.src 图片，并使用 i.onload() 方法确定图像的高度和宽度。
然而，这个程序只显示页面上呈现的 img 元素的大小，而不是图像的自然高度和宽度。
在 JavaScript 中使用 naturalWidth 和 naturalHeight 获取图像尺寸
在处理图像尺寸时，始终强烈建议我们计算出图像的真实宽度和高度。
因此，我们将考虑使用 naturalWidth 和 naturalHeight 属性来使用 JavaScript 检索图像的确切尺寸。
naturalWidth 和 naturalHeight 是只读属性，它们用于找出图像的原始宽度和高度。
我们可能会使用 img 标签的 width 和 height 元素来更改我们网页上显示的图像的高度和宽度。naturalWidth 和 naturalHeight 属性用于需要图像的原始宽度或高度的情况。
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Find Real Image Width and Height</title>
<script>
function imgSize(){
var myImg = document.querySelector("#sky");
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
}
</script>
</head>
<body>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/2560px-Image_created_with_a_mobile_phone.png" id="sky" width="250" alt="Cloudy Sky">
<p><button type="button" onclick="imgSize();">Get Original Image Size</button></p>
</body>
</html>
输出：
在使用这种方法时，我们可能会得到非常不一致的结果。在直接找到图像的尺寸之前考虑这两种情况也很重要。
图像可能没有被获取，在这种情况下尝试获取尺寸会给我们错误的输出。
首先，我们必须确保图像已加载。我们还需要检查图像是否从浏览器的缓存中加载。
问题源于内部，即 JavaScript 运行时。如果 JavaScript 在该图像完全下载和渲染之前运行，则结果将为 0。
但是，如果 JavaScript 在图像下载和渲染后运行，结果将是正确的。
<html>
<head>
<title>Title of the Document</title>
<style>
img {
margin: 20px;
}
</style>
</head>
<body>
<div>Click on img to see the result</div>
<script>
let img = document.createElement('img');
img.id = 'imgId';
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/2560px-Image_created_with_a_mobile_phone.png';
document.body.appendChild(img);
img.addEventListener("click", imgSize);
function imgSize() {
let img = document.getElementById('imgId');
let width = img.clientWidth;
let height = img.clientHeight;
alert("Original width=" + width + ", " + "Original height=" + height);
}
</script>
</body>
</html>i.addEventListener('load', function() {
console.log('Width: ', this.naturalWidth);
console.log('Height: ', this.naturalHeight);
});
此链接将提供上述示例中使用的代码。
我们能做的最低限度是在测量之前确保图像已经加载。图像完成后会发出一个 load 事件，你可以使用回调来进行测量。
我们还将进行一些错误处理，因为图像可以发出一个 error 事件。