Determine original size of image cross browser?

by

You have 2 options:

Option 1:

Remove the width and height attributes and read offsetWidth and offsetHeight

Option 2:

Create a JavaScript Image object, set the src, and read the width and height (you don’t even have to add it to the page to do this).

function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      alert ('The image size is '+width+'*'+height);
    }

    newImg.src = imgSrc; // this must be done AFTER setting onload
}

Edit by Pekka: As agreed in the comments, I changed the function to run on the ´onload´ event of the image. Otherwise, with big images, height and width would not return anything because the image was not loaded yet.

More Related Contents:

  1. how to proportionally scale a div with images inside?
  2. How to resize images proportionally / keeping the aspect ratio?
  3. Render HTML to an image
  4. How to compress an image via Javascript in the browser?
  5. Change image size with JavaScript
  6. How can I determine if an image has loaded, using Javascript/jQuery?
  7. Javascript: Cancel/Stop Image Requests
  8. Waiting for image to load in JavaScript
  9. How to silently hide “Image not found” icon when src source image is not found
  10. How to save a base64 image to user’s disk using JavaScript?
  11. Can I get image from canvas element and use it in img src tag?
  12. JS – get image width and height from the base64 code
  13. How do image preloaders work?
  14. rotate a .gif image on google maps api v3?
  15. How to set the image quality while converting a canvas with the “toDataURL” method?
  16. React-Native: Convert image url to base64 string
  17. Javascript : get src and set as variable?
  18. Image brightness detection in client side script
  19. Copy Image to Clipboard from Browser in Javascript?
  20. Using image.complete to find if image is cached on chrome?
  21. ReadFile in Base64 Nodejs
  22. How much data / information can we save / store in a QR code?
  23. Get pixel color from an image [duplicate]
  24. jQuery fade to new image
  25. How lazy loading images using JavaScript works?
  26. Converting bytes to an image for drawing on a HTML5 canvas
  27. Using base64-encoded images with HtmlService in Apps Script
  28. Dynamically replace img src attribute with jQuery
  29. How to show animated image from PNG image using javascript? [ like gmail ]
  30. How to convert a byte array into an image?

Leave a Comment