js怎么获取一张图片的长宽

通过JavaScript获取图片的长宽，可以使用Image对象、使用HTMLImageElement对象、以及使用FileReader对象来读取本地图片的尺寸。这三种方法各有其适用的场景和优缺点，下面将详细介绍其中一种方法的具体实现步骤。

使用Image对象获取图片的尺寸

使用Image对象是最常见且简单的方式之一，你可以通过JavaScript创建一个新的Image对象，并在图片加载完成后获取其宽度和高度。以下是详细的实现步骤。

一、通过Image对象获取图片尺寸

创建一个新的Image对象，并设置图片的src属性为你要获取尺寸的图片路径。然后在图片加载完成后，通过Image对象的width和height属性获取图片的宽度和高度。

// 创建一个新的Image对象

var img = new Image();
// 设置图片的src属性
img.src = 'your-image-url.jpg';
// 当图片加载完成后获取图片的宽度和高度
img.onload = function() {
    var width = img.width;
    var height = img.height;
    console.log('图片宽度:', width);
    console.log('图片高度:', height);
};

这种方法适用于通过URL获取图片的尺寸，但不适用于本地文件上传等情况。接下来，我们将详细介绍如何使用HTMLImageElement对象和FileReader对象来获取本地图片的尺寸。

二、通过HTMLImageElement对象获取图片尺寸

在HTML中，使用<img>标签显示图片，并通过JavaScript来获取图片的宽度和高度。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取图片尺寸</title>
</head>
<body>
    <img id="myImage" src="your-image-url.jpg" alt="Sample Image">
    <script>
        var img = document.getElementById('myImage');
        // 当图片加载完成后获取图片的宽度和高度
        img.onload = function() {
            var width = img.width;
            var height = img.height;
            console.log('图片宽度:', width);
            console.log('图片高度:', height);
        };
    </script>
</body>
</html>

这种方法适用于页面上已经存在的图片，通过JavaScript直接访问HTMLImageElement对象获取图片的尺寸。

三、通过FileReader对象获取本地图片尺寸

如果需要获取用户上传的本地图片的尺寸，可以使用FileReader对象来读取图片文件，并在图片加载完成后获取其宽度和高度。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取本地图片尺寸</title>
</head>
<body>
    <input type="file" id="uploadImage">
    <script>
        var uploadImage = document.getElementById('uploadImage');
        uploadImage.onchange = function(event) {
            var file = event.target.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var img = new Image();
                    img.src = e.target.result;
                    img.onload = function() {
                        var width = img.width;
                        var height = img.height;
                        console.log('图片宽度:', width);
                        console.log('图片高度:', height);
                    };
                };
                reader.readAsDataURL(file);
            }
        };
    </script>
</body>
</html>

这种方法适用于用户上传本地图片的场景，通过FileReader对象读取图片文件，并在图片加载完成后获取其尺寸。

结论

通过JavaScript获取图片的长宽有多种方法，包括使用Image对象、HTMLImageElement对象和FileReader对象。每种方法都有其适用的场景和优缺点，开发者可以根据具体需求选择合适的方法。无论使用哪种方法，关键在于确保在图片加载完成后再获取其尺寸，以避免获取到错误的数据。

相关问答FAQs：

1. 如何使用JavaScript获取图片的长宽？

• 问题：如何使用JavaScript获取一张图片的长宽？
• 回答：您可以使用JavaScript中的Image对象来获取图片的长宽。以下是获取图片长宽的示例代码：

var img = new Image();
img.onload = function() {
  var width = this.width; // 图片的宽度
  var height = this.height; // 图片的高度
  console.log("图片的长宽分别为：" + width + " x " + height);
};
img.src = "图片的URL";

请将代码中的图片的URL替换为您要获取长宽的图片的URL地址。

2. 怎样使用JavaScript获取图片的尺寸？

• 问题：我想使用JavaScript获取一张图片的尺寸，该怎么做呢？
• 回答：您可以使用JavaScript中的naturalWidth和naturalHeight属性来获取图片的尺寸。以下是获取图片尺寸的示例代码：

var img = document.getElementById("yourImage"); // 请将"yourImage"替换为您的图片元素的id
var width = img.naturalWidth; // 图片的宽度
var height = img.naturalHeight; // 图片的高度
console.log("图片的尺寸为：" + width + " x " + height);

请确保您已经将图片元素的id替换为您实际使用的图片元素的id。

3. JavaScript如何获取图片的大小信息？

• 问题：我想获取一张图片的大小信息，该如何用JavaScript实现？
• 回答：您可以使用JavaScript中的FileReader对象来读取图片文件，并获取其大小信息。以下是获取图片大小信息的示例代码：

var fileInput = document.getElementById("yourFileInput"); // 请将"yourFileInput"替换为您的文件输入元素的id
var file = fileInput.files[0]; // 获取选择的图片文件
var size = file.size; // 图片的大小，单位为字节
console.log("图片的大小为：" + size + "字节");

请确保您已经将文件输入元素的id替换为您实际使用的文件输入元素的id。注意，此方法需要用户手动选择图片文件，而不是直接指定图片的URL地址。