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?
Share Improve this question edited Apr 29, 2015 at 0:07 Mark Said Camilleri 3886 silver badges20 bronze badges asked May 18, 2014 at 19:24 RocRoc 2,7093 gold badges17 silver badges18 bronze badges 2-
What does the URL have to do with the image? Why are you using
.clientWidthinstead of just.widthin the same fashion that you use to set theheight? – 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
Reset to default 4If 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 -
- 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>- 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);