How to get original image size (width & height) in JavaScript?

How to get original image size (width & height) in JavaScript?

Asked on October 30, 2018 in Javascript.
Add Comment


  • 4 Answer(s)

      Using the HTML 5 image naturalwidth properties and natural height properties, It is easy to find orginal size

    For ex:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>JavaScript Find Real Image Width and Height</title>
    <script type="text/javascript">
      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="sky.jpg" id="sky" width="250" alt="Cloudy Sky" contextmenu="skymenu">
      <p><button type="button" onclick="imgSize();">Get Original Image Size</button></p>
    </body>
    </html>
    
    Answered on October 30, 2018.
    Add Comment

    The following code will solve cross browser problem by using jquery method:

    For ex:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>jQuery Get Real Image Dimensions</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
      $("button").click(function()
    {
        var img = $("#sky");
        // Create dummy image to get real width and height
        $("<img>").attr("src", $(img).attr("src")).load(function()
    {
          var realWidth = this.width;
          var realHeight = this.height;
          alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
        });
      });
    });
    </script>
    </head>
    <body>
      <img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky" contextmenu="skymenu">
      <p><button type="button">Get Original Image Size</button></p>
    </body>
    </html>
    
    Answered on October 30, 2018.
    Add Comment

    Webkit browsers set the height and width property after the image is loaded. Instead of using timeouts, I’d recommend using an image’s onload event. Here’s a quick example:

    var img = $("img")[0]; // Get my img elem
    var pic_real_width, pic_real_height;
    $("<img/>") // Make in memory copy of image to avoid css issues
        .attr("src", $(img).attr("src"))
        .load(function() {
            pic_real_width = this.width;   // Note: $(this).width() will not
            pic_real_height = this.height; // work for in memory images.
        });

    To avoid any of the effects CSS might have on the image’s dimensions, the code above makes an in memory copy of the image. This is a very clever solution suggested by FDisk.

    You can also use the naturalHeight and naturalWidth HTML5 attributes.

    Answered on February 24, 2019.
    Add Comment

    Cross-Browser:

    $("<img/>").load(function(){
        var width  = this.width,
            height = this.height; 
        alert( 'W='+ width +' H='+ height);
    }).attr("src", "image.jpg");

    HTMLImageElement properties / HTML5 compliant browsers

    If you want to investigate about all the HTMLImageElement properties: https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement
    Many of those properties are available already in modern, HTML5 compliant browsers, and accessible using jQuery’s .prop() metod

    var $img = $("#myImage");
    
    console.log(
        $img.prop("naturalWidth") +'\n'+  // Width  (Natural)
        $img.prop("naturalHeight") +'\n'+ // Height (Natural)
        $img.prop("width") +'\n'+         // Width  (Rendered)
        $img.prop("height") +'\n'+        // Height (Rendered)
        $img.prop("x") +'\n'+             // X offset
        $img.prop("y")                    // Y offset ... 
    );
    Answered on February 24, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.