CODEWITHSUNDEEP
javascriptimage
Wolfy
Wolfy

Reputation: 1

Getting height and width of an image variable in Javascript

I'm trying to load a picture in an image variable and test whether it is landscape or portrait for putting it in a frame. The user selects the URL from a drop-down. But, the following snippet gives a width of 0 about every other time. What dumb thing am I doing?

        var Select_Picture = document.getElementById("ddlSelectPicture");
        var Client_Picture = document.getElementById("imgClientPicture");
        var Temp_Image = new Image();
        var Image_Height;
        var Image_Width;

        Temp_Image.src = Select_Picture.value;

        // WAIT FOR PICTURE TO LOAD
        while (Temp_Image.width < 1 || Temp_Image.height < 1)
        {
            Image_Width = Temp_Image.width;
        }
        Image_Height = Temp_Image.height;

        alert(Image_Width + "  " + Image_Height);

Upvotes: 0

Views: 83

Answers (3)

skylize
skylize

Reputation: 1451

Even though javascript is single threaded, the browser is not. So while you do your best to bring your user's system to a screeching halt with your endless loop, the browser still manages to load your image and now needs to push it's properties out into the javascript world for you to access.

Your while loop will keep jumping in and getting in the way of everything javascript related that the browser tries to do, so even after the image is ready, it may take many cycles of the event loop to actually populate the properties of width and height on your image and they likely won't update in the same loop.

So your test is going like this: (we'll pretend it's 100px x 100px)

// repeat this over and over and over
if ( Temp_Image.width < 1) /* true */
   Image_Width = Temp_Image.width /* 0 */

// until finally
if (Temp_Image.width === 0 /* false */)
    // okay we finally branched into right side of expression
    if (Temp_Image.height < 1) /* ??? */
        // what now?

Well if its true (meaning height not yet available), it will look like this.

// keep repeating this over and over and over
if (Temp_Image.width < 1 ) /* false */ 
    if (Temp_Image.height < 1) /* true */
       Image_Width = Temp_Image.width /* 100 */

// until finally
if (Temp_Image.width < 1 ) /* false */
    if (Temp_Image.height < 1) /* false */
        break
Image_Height = Temp_Image.height /* 100 */

// we've finally left the loop and the width is properly set

Well if its false (meaning height already available), it will look like this.

if (Temp_Image.width < 1 ) /* false */
    break
Image_Height = Temp_Image.height /* 100 */

// wait... hold on... we forgot to set the width

You set the width to 0 over and over on every iteration of the loop, but if the height property is already available when you finally receive a real width value, then you break at the top of the loop before stashing it in a variable.

There is no guarantee of which property is set first, (width or height), as so clearly demonstrated by your 50/50 results.

So if this is for studying loops, then go ahead and try to make it work properly yourself. Might be a good exercise if the answer doesn't seem obvious to you.

But if you are actually trying to serve images in the browser, then DON'T DO THAT! You're blocking the thread! Stop it!

Follow the already given advice of listening for the load event instead looping.

Upvotes: 0

tklg
tklg

Reputation: 2642

You are trying to read the height and width of the image before it has loaded.
onload will be called when Temp_Image has finished loading, so the image will have a width and height.

Temp_Image.onload = function() {
    console.log(Temp_Image.width);
}
Temp_Image.src = Select_Picture.value;

Upvotes: 1

Pritam Banerjee
Pritam Banerjee

Reputation: 18968

You can directly get the height and width like this:

var height = document.getElementById("myImg").height;
var width = document.getElementById("myImg").width;

Upvotes: 0

Related Questions