在 JavaScript 中获取图像尺寸

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中获取图像尺寸

作者：迹忆客最近更新：2024/03/16 浏览次数：

有时，在将图像上传到托管服务器或使用它之前，我们可能需要检查或验证图像的尺寸，即图像的高度和宽度。我们可能需要检查其尺寸以调整大小、裁剪或更改图像。

我们可以使用 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);
});