Get the width of an image specified by an url jquery

Question

I want to read out the width (orgWidth) of an image specified by an url within a for-loop, calculate its new width (calcWidth) for a height of 480px.

for (var i=1; i <= item.length; i++) {

    url = document.images[i].rsc;
    orgWidth = some-fancy-thing-that-reads-the-width;
    orgHeight = some-fancy-thing-that-reads-the-height;

    factor = orgHeight / 480        // 1400 / 480 = 2.916
    calcWidth = orgWidth / factor       // 1000 / 2.916 = 342.935

    document.images[i].width = calcWidth;

}

Page I need it for: http://foto.hendrik-schicke.de/index.php/people

You might want to take a look at http://stackoverflow.com/questions/1643858/image-native-width-in-jquery — Brian Hoover, Dec 26 '11 at 15:06

Muhammad Usman · Answer 1 · 2015-07-14T15:55:33.707

11

var tmpImg = new Image();
tmpImg.src="https://www.google.com/intl/en_com/images/srpr/logo3w.png"; //or  document.images[i].src;
$(tmpImg).on('load',function(){
  var orgWidth = tmpImg.width;
  var orgHeight = tmpImg.height;
  alert(orgWidth+"x"+orgHeight);
});

Demo: http://jsfiddle.net/eWzWg/3/

edited Jul 14 '15 at 15:55

answered Dec 26 '11 at 15:25

Muhammad Usman

12,439
6
36
59

Your demo and my page returns 0 for orgWidth and orgHeight. :( – Kibou Dec 26 '11 at 15:35
It seems image loading was taking time, try the edited answer, http://jsfiddle.net/eWzWg/3/ – Muhammad Usman Dec 26 '11 at 15:39
Works on this example, but not on my page. After the for-loop finished the part "$(tmpImg).one('load',function(){" starts. See: http://jsfiddle.net/eWzWg/10/ – Kibou Dec 26 '11 at 16:05
Why the loop is for actually? – Muhammad Usman Dec 26 '11 at 16:10

score 4 · Answer 2 · answered Dec 26 '11 at 15:12

This is not possible using javascript, it is certainly not possible by 'not-preloading' either, as you would need to 'have' the file in order to do something with it.

Your best approach would be to hand off the URL of the image to a server side script (PHP?) that would get the image dimensions and pass the data back to you or store it in a DB (possibilities are endless here).

But to answer your question, it is not possible with pure javascript WITHOUT loading the image.

Is there a way to do it with preloading, but with the claimed feature? — Kibou, Dec 26 '11 at 15:18

aliaksej · Answer 3 · 2011-12-26T16:11:55.153

We can check whether image is already loaded to browser's cache. Only if image is loaded, we bind onload handler to it. This is pure javascript example.

var image;
function onload () {
    console.log(image.height, image.width);
}

image= new Image();
image.src="https://www.google.com/intl/en_com/images/srpr/logo3w.png";
// check if image is already loaded to cache
if (image.complete) {
    console.log('image already loaded to browser');
    onload();
} else {
    // or bind onload handler for image
    image.onload = onload;
}

Play with that example at jsFiddle

Get the width of an image specified by an url jquery

3 Answers3