I'm trying to get the width of an image after a change in the height and I only have the URL (the image is not in a tag in the HTML) so I tried this code:

var img = document.createElement("img");
img.src = "./images/niceImages.jpg";
img.style.height = "200px";
console.log(img.clientWidth);

But the property "clientWidth" returned 0. I know that maybe with JQuery it is a lot easier however, I want do it with pure Javascript.

Does anyone know if this can be done? Or at least how to get the aspect ratio or width and height of the image URL?

I'm trying to get the width of an image after a change in the height and I only have the URL (the image is not in a tag in the HTML) so I tried this code:

var img = document.createElement("img");
img.src = "./images/niceImages.jpg";
img.style.height = "200px";
console.log(img.clientWidth);

But the property "clientWidth" returned 0. I know that maybe with JQuery it is a lot easier however, I want do it with pure Javascript.

Does anyone know if this can be done? Or at least how to get the aspect ratio or width and height of the image URL?

• javascript
• image
• dom
• aspect-ratio

• What does the URL have to do with the image? Why are you using .clientWidth instead of just .width in the same fashion that you use to set the height? – AstroCB Commented May 18, 2014 at 19:28
• 1 I use the .clientWidth because if You use the property .style.width since You don't have any styles it returns an empty string. And the URL is just the source of the image and since I don't have an element image yet I only have the URL to work with. – Roc Commented May 18, 2014 at 20:55

2 Answers 2

If you append the image you create to the DOM then you should find that the width is then calculated and is then available as normal

var img = document.createElement("img");
img.src = "http://cdn.sstatic/stackexchange/img/logos/so/so-icon.png";
img.onload = function(){
    img.style.height = "200px";
    img.style.visibility = 'hidden';
    document.body.appendChild(img);
    console.log(img.clientWidth);
}

I figured out some better solutions -

1. Javascript

function loadImage() {
  const imgSrc = 'https://cdn.pixabay./photo/2015/03/26/09/47/sky-690293_1280.jpg'
  const img = new Image();
  img.src = imgSrc;
  img.onload = function() {
    document.body.appendChild(img); // You can get the image ratio without inserting the image in body
    alert('Image ratio' + img.width/img.height);
  }
}

<button onClick="loadImage()">Load Image</button>

2. Angular (Typescript) - ( Snippet will not run because of angular unavailability )

public getImageRatio(url: string): Promise <any> {
  return Promise((resolve, reject) => {
    const img = new Image();
    img.src = url;
    img.onload = function() {
      resolve(img.width / img.height);
    };
    img.onerror = function() {
      reject('Image failed to load');
    };
  });
}

async loadImage(url) {
  const imageRatio = await getImageRatio('image-url-here');
  alert(imageRatio);
}

loadImage(url);