How do you check the size of an image in html?

I only have a URL to an image. I need to determine the height and width of this image using only JavaScript. The image cannot be visible to the user on the page. How can I get its dimensions?

asked Apr 12, 2011 at 9:45

2

var img = new Image[];

img.onload = function[]{
  var height = img.height;
  var width = img.width;

  // code here to use the dimensions
}

img.src = url;

answered Dec 13, 2013 at 14:37

ShumiiShumii

4,4215 gold badges30 silver badges40 bronze badges

10

Make a new Image

var img = new Image[];

Set the src

img.src = your_src

Get the width and the height

//img.width
//img.height

answered Apr 12, 2011 at 9:48

nc3bnc3b

14.8k5 gold badges49 silver badges63 bronze badges

8

naturalWidth and naturalHeight

var img = document.createElement["img"];
img.onload = function [event]
{
    console.log["natural:", img.naturalWidth, img.naturalHeight];
    console.log["width,height:", img.width, img.height];
    console.log["offsetW,offsetH:", img.offsetWidth, img.offsetHeight];
}
img.src = "image.jpg";
document.body.appendChild[img];

// css for tests
img { width:50%;height:50%; }

answered Oct 28, 2019 at 8:05

BitterblueBitterblue

11.9k15 gold badges81 silver badges123 bronze badges

This uses the function and waits for it to complete.

//jsfiddle.net/SN2t6/118/

function getMeta[url]{
    var r = $.Deferred[];

  $['
DavidDunhamDavidDunham
1,14919 silver badges39 bronze badges

  

3
Combining promises & typescript typing:
/**
 * Returns image dimensions for specified URL.
 */
export const getImageDimensions = [url: string]: Promise => {
  return new Promise[[resolve, reject] => {
    const img = new Image[];
    img.onload = [] => resolve[{
      width: img.width,
      height: img.height,
    }];
    img.onerror = [error] => reject[error];
    img.src = url;
  }];
};
Usage:
try {
  const {width, height} = await getImageDimensions[entry.NWS_IMAGE];
  console.log[`Image dimensions: ${width}px x ${height}px`];
} catch [e] {
  // Could not load image from specified URL
  console.error[e];
}
 answered Dec 31, 2021 at 16:46

Quentin S.Quentin S.
1,42219 silver badges18 bronze badges
0
if you have image file from your input
form. you can use like this
let images = new Image[];
images.onload = [] => {
 console.log["Image Size", images.width, images.height]
}
images.onerror = [] => result[true];

let fileReader = new FileReader[];
fileReader.onload = [] => images.src = fileReader.result;
fileReader.onerror = [] => result[false];
if [fileTarget] {
   fileReader.readAsDataURL[fileTarget];
}
 answered Jan 8, 2020 at 9:57
 
Get image size with jQuery
function getMeta[url]{
    $["
Sunny KumarSunny Kumar

  

8135 silver badges13 bronze badges
Similar question asked and answered using JQuery here:
Get width height of remote image from
url
function getMeta[url]{
  $["
 answered Dec 9, 2014 at 19:18
 
Following code add image attribute height and
width to each image on the page.



Untitled

function addImgAttributes[]
{
    for[ i=0; i < document.images.length; i++]
    { 
        width = document.images[i].width;
        height = document.images[i].height;
        window.document.images[i].setAttribute["width",width];
        window.document.images[i].setAttribute["height",height];

    }
}







 answered Mar 8, 2012 at 10:40
 
1
 

			
How do I find the size of an image?
			
To determine the size of an image using Chrome, follow these steps:.
 
Open the page with your feed in Chrome..
 
Right-click the image whose size you want to know and select Inspect..
 
View your image's width and height displayed in the Chrome DevTools. [Note, the first number is always the width]..
 
		
			
How do you size an image in HTML?
			
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels. For example, the original image is 640×960.
		
			
How do I find out the size of an image on a website?
			
Right-click [pc] or command-click the image [mac] and select “inspect element”. The image dimensions will appear for a few moments in yellow. To re-view the dimensions, repeat the right click “inspect element” selection.