CODEWITHSUNDEEP
javascripthtmlajax
user3143218
user3143218

Reputation: 1816

Get image dimensions with JavaScript using innerHTML

I'm working on an AJAX function that receives image URLs. However, I won't be using a node append to insert it. I'm using innerHTML, which makes it difficult to get the file dimensions.

At the moment, I'm using a function which is returning somewhat mixed results. Sometimes it gets the actual dimensions, other times it returns "0" as the image dimensions.

This is my function:

var url = "http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg";
var width = getDimensions(url)[0];
var height = getDimensions(url)[1];
var insert = '<img src="'+url+'" width="'+width+'" height="'+height+'" />';

    function getDimensions(path) {
            var img = new Image();
            img.src = path;
            return [img.width, img.height]; 
    }

Not sure why it's acting inconsistently though. Does anyone have any suggestions?

I was thinking it might be something to do with the AJAX inserting the image before it loads the dimensions, although not really sure.

Here's a fiddle, which seems to work as expected, but like I said, it's inconsistent.

http://jsfiddle.net/aH5re/1/

EDIT Here is a second fiddle with a much larger image. I noticed it's a lot more inconsistent than a smaller image file

http://jsfiddle.net/aH5re/2/

Upvotes: 0

Views: 192

Answers (1)

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

You'll have to wait for the image to finish loading before you can get the dimensions properly and reliably. What's currently happening is that it's returning the dimensions before the image is potentially fully loaded. If you have it already cached you may be getting correct dimensions but on a large image uncached you're not going to get reliable results.

Have a look at this demo about how you could perhaps achieve that.

http://jsfiddle.net/robschmuecker/aH5re/5/

Javascript:

var url = "http://www.hdwallpapers.in/download/transformers_4_age_of_extinction-2560x1440.jpg";

var div = document.querySelector('div');
alert('loading image now');
var button = document.querySelector('.test');
getDimensions(url);



button.addEventListener('click', function () {
    div.innerHTML = insert;
});


function getDimensions(path) {
    var img = new Image();
    img.src = path;
    img.onload = function () {
        alert('loaded');
        var width = img.width;
        var height = img.height;
        insert = '<img src="' + url + '" width="' + width + '" height="' + height + '" />';
        button.disabled = false
    };
}

Upvotes: 1

Related Questions