如何获取图像的宽度和高度？

给定一张图片，任务是使用 JavaScript 获取图片的宽度和高度。 width 和 height 属性用于显示图像的宽度和高度。

宽度的语法：

var width = this.width;

高度的语法：

var height = this.height;

例1：本例选择图片，然后使用this.width和this.height方法获取图片的宽高。

      

    
        Get the real width and height of
        an image using JavaScript
    

  

  
        
            GeeksforGeeks
        
  
        
            Getting the real width and height of an image
        
  
        
            function CheckImageSize() {
                var image = document.getElementById("Image").files[0];
                createReader(image, function(w, h) {
  
                    alert("Width is: " + w + 
                    "pixels, Height is: " + h + "pixels");
                });
            }
  
            function createReader(file, whenReady) {
                var reader = new FileReader;
                reader.onload = function(evt) {
                    var image = new Image();
                    image.onload = function(evt) {
                        var width = this.width;
                        var height = this.height;
                        if (whenReady) whenReady(width, height);
                    };
                    image.src = evt.target.result;
                };
                reader.readAsDataURL(file);
            }
        
  
        
        

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：此示例显示图像的尺寸。它将在不使用警报函数的情况下显示结果。在这里，我们将在同一窗口中显示结果。

  

    
        Get the real width and height of
        an image using JavaScript
    

  

      
    
      
    
        Click the button to display the width
        and height of the image
    
      
    Try it
      
    The width of the image in pixels:
      
    
      
    The height of the image in pixels:
      
    
      
    
        function myFunction() {
            var x = document.getElementById("myImg").width;
            var y = document.getElementById("myImg").height;
            document.getElementById("geeks").innerHTML = x;
            document.getElementById("gfg").innerHTML = y;
        }
    

  
                    

输出：

• 在点击按钮之前。
  
• 点击按钮后：