How do I get natural dimensions of an image using JavaScript or jQuery?

by

You could use naturalWidth and naturalHeight, these properties contain the actual, non-modified width and height of the image, but you have to wait until the image has loaded to get them

var img = document.getElementById('draggable');

img.onload = function() {
    var width  = img.naturalWidth;
    var height = img.naturalHeight;
}

This is only supported from IE9 and up, if you have to support older browser you could create a new image, set it’s source to the same image, and if you don’t modify the size of the image, it will return the images natural size, as that would be the default when no other size is given

var img     = document.getElementById('draggable'),
    new_img = new Image();

new_img.onload = function() {
    var width  = this.width,
        heigth = this.height;
}

new_img.src = img.src;

FIDDLE

More Related Contents:

  1. JS – get image width and height from the base64 code
  2. Get image width and height from the Base64 code in JavaScript
  3. How can I modify with css an image appended with javascript?
  4. how to resize responsive image up and down
  5. How do I make two images fade in/out repeatedly? [closed]
  6. Check if an image is loaded (no errors) with jQuery
  7. Changing the image source using jQuery
  8. Get file size, image width and height before upload
  9. Asynchronously load images with jQuery
  10. How to resize images proportionally / keeping the aspect ratio?
  11. How do you cache an image in Javascript
  12. How to load all the images from one of my folder into my web page, using Jquery/Javascript
  13. In Bootstrap open Enlarge image in modal
  14. Disable dragging an image from an HTML page
  15. Load image with jQuery and append it to the DOM
  16. Get image dimensions with Javascript before image has fully loaded
  17. How do I abort image load requests without using window.stop()
  18. JavaScript: Know when an image is fully loaded
  19. Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
  20. How to get the image size (height & width) using JavaScript
  21. Sort by image resolution in gallery
  22. Add image in pdf using jspdf
  23. jQuery resize to aspect ratio
  24. How to create a new img tag with JQuery, with the src and id from a JavaScript object?
  25. jQuery, JavaScript, HTML: how to load images after everything else is loaded?
  26. jQuery fade to new image
  27. canvas- Cropping images in different shapes
  28. Dynamically replace img src attribute with jQuery
  29. How should I crop an image at client side using jcrop and upload it?
  30. Remove selected file(s) before upload with Javascript

Leave a Comment