jQuery/javascript - Get Image size before load

Question

I have a list of images that is rendered as thumbnails after upload. The issue that I have is I need the dimensions of the fully uploaded images, so that I can run a resize function if sized incorrectly.

Function that builds the image list

function buildEditList(json, galleryID)
{
    //Hide the list
    $sortable = $('#sortable');
    $sortable.hide();

    for(i = 0, j = json.revision_images.length; i < j; i++) {
        $sortable.append(
            "<li id='image_" + json.revision_images[i].id + "'><a class=\"ui-lightbox\" href=\"../data/gallery/"
            + galleryID
            + "/images/album/"
            + json.revision_images[i].OrgImageName
            + "\"><img id=\""
            + json.revision_images[i].id
            + "\" alt=\"\" src=\"../data/gallery/"
            + galleryID 
            + "/images/album/" 
            + json.revision_images[i].OrgImageName 
            + "\"/></a></li>"
        ).hide();
    }
    //Set first and last li to 50% so that it fits the format
    $('#sortable li img').first().css('width','50%');
    $('#sortable li img').last().css('width', '50%');

    //Fade images back in 
    $sortable.fadeIn("fast",function(){
        var img = $("#703504"); // Get my img elem -- hard coded at the moment
        var pic_real_width, pic_real_height;
        $("<img/>") // Make in memory copy of image to avoid css issues
            .attr("src", $(img).attr("src"))
            .load(function() {
                pic_real_width = this.width;   // Note: $(this).width() will not
                pic_real_height = this.height; // work for in memory images.
        });
        alert(pic_real_height);
    });

}

I have been trying to use the solution from this stackoverflow post, but have yet to get it to work, or it may just be my code. if you have any ideas on this I could use the help. Currently the alert is coming back undefined.

@Mark - currently my alert(pic_real_width) is coming back undefined. — SuperNinja, Dec 13 '12 at 00:11
@Jeroen - I thought about handling this with PHP on the upload with getimagesize(); but that drastically slowed down the upload process. — SuperNinja, Dec 13 '12 at 00:12

Syon · Accepted Answer · 2012-12-13T00:27:01.097

2

There's a newer js method called naturalHeight or naturalWidth that will return the information you're looking for. Unfortunately it wont work in older IE versions. Here's a function I created a few months back that may work for you. I added a bit of your code below it for an example:

function getNatural($mainImage) {
    var mainImage = $mainImage[0],
        d = {};

    if (mainImage.naturalWidth === undefined) {
        var i = new Image();
        i.src = mainImage.src;
        d.oWidth = i.width;
        d.oHeight = i.height;
    } else {
        d.oWidth = mainImage.naturalWidth;
        d.oHeight = mainImage.naturalHeight;
    }
    return d;
}

var img = $("#703504");
var naturalDimension = getNatural(img);
alert(naturalDimension.oWidth, naturalDimension.oHeight)

edited Dec 13 '12 at 00:27

answered Dec 13 '12 at 00:20

Syon

1,604
13
16

8

I can't see why this would work. At least *something* must have been returned from the server for the width/height to be known. That return will be asynchronous whilst the code above is written as if it was synchronous, so may work with images already cached by the browser. But how about uncached images? – Beetroot-Beetroot Dec 13 '12 at 01:20
1

I keep getting naturalWidths and -height of 0 for all my images. Is there something to @Beetroot-Beetroot's comment perhaps? – Henrik Jul 25 '14 at 08:52
1

wont work for uncached images (or if the image takes lot of time to load) – sk8terboi87 ツ Aug 22 '14 at 14:02

jQuery/javascript - Get Image size before load

1 Answers1

Linked