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 = "https://boxhoidap.com/image.jpg";
document.body.appendChild(img);

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

answered Oct 28, 2019 at 8:05

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

BitterblueBitterblue

11.9k15 gold badges81 silver badges123 bronze badges

This uses the function and waits for it to complete.

http://jsfiddle.net/SN2t6/118/

function getMeta(url){
    var r = $.Deferred();

  $('<img/>').attr('src', url).load(function(){
     var s = {w:this.width, h:this.height};
     r.resolve(s)
  });
  return r;
}

getMeta("http://www.google.hr/images/srpr/logo3w.png").done(function(test){
    alert(test.w + ' ' + test.h);
});

answered Apr 27, 2016 at 14:57

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

DavidDunhamDavidDunham

1,14919 silver badges39 bronze badges

3

Combining promises & typescript typing:

/**
 * Returns image dimensions for specified URL.
 */
export const getImageDimensions = (url: string): Promise<{width: number, height: number}> => {
  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

Xem thêm:  So sánh nhiệt độ nóng chảy của HF HCl HBr HI

Quentin S.Quentin S.

1,42219 silver badges18 bronze badges

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

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

Get image size with jQuery

function getMeta(url){
    $("<img/>",{
        load : function(){
            alert(this.width+' '+this.height);
        },
        src  : url
    });
}

Get image size with JavaScript

function getMeta(url){   
    var img = new Image();
    img.onload = function(){
        alert( this.width+' '+ this.height );
    };
    img.src = url;
}

Get image size with JavaScript (modern browsers, IE9+ )

function getMeta(url){   
    var img = new Image();
    img.addEventListener("load", function(){
        alert( this.naturalWidth +' '+ this.naturalHeight );
    });
    img.src = url;
}

Use the above simply as: getMeta(
“http://example.com/img.jpg” );

https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement

answered Nov 4, 2019 at 5:30

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

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){
  $("<img/>").attr("src", url).load(function(){
     s = {w:this.width, h:this.height};
     alert(s.w+' '+s.h);      
  }); 
}

getMeta("http://page.com/img.jpg");

answered Dec 9, 2014 at 19:18

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

Following code add image attribute height and
width to each image on the page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
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);

    }
}
</script>
</head>
<body onload="addImgAttributes();">
<img src="https://boxhoidap.com/2_01.jpg"/>
<img src="https://boxhoidap.com/2_01.jpg"/>
</body>
</html>

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.

Thuộc website harveymomstudy.com

Related Posts