Getting width and height of actual loaded image with attributes set

Question

I have an image tag with the width and height set:

<img src='<%#Eval("ImageLocation").ToString().TrimStart(new char[]{'~'}).ToLower() %>' width="147px" height="147px" />

Now some images are not 147x147 meaning they look not good, so I want to check the width and height of the image after load. I tried adding the onload on the img

<img src='<%#Eval("ImageLocation").ToString().TrimStart(new char[]{'~'}).ToLower() %>' width="147px" height="147px" onload="checkOrientation(this);"/>

and in the function I do :

 function checkOrientation(el) {
           alert(el.width + "    " + el.height);

           if (el.height < el.width)
               $(el).removeAttr('height');
           else
               $(el).removeAttr('width');
       }

but this always gives the 147 back, even if the picture not 147.

How can I get the width and height of the actual loaded image?

You passed width and height values to be static that is "147px", so your function alerts 147 — Dastagir

Suresh Ponnukalai Suresh Ponnukalai · Accepted Answer · 2014-06-18T12:03:18

If you want to take the original width and height then you need to write the function like below. The idea is to assign the src to new img element and check the width and height. Becuase you have already assigned some width and height for the current img.

  function checkOrientation(el) {
        var image = new Image();
        image.src = el.attr('src');
        image.onload = function () {
        this.height;
        this.width;
        alert(this.width + "    " + this.height);
        if (this.height < this.width)
           $(el).removeAttr('height');
       else
           $(el).removeAttr('width');
        } 
   }

Getting width and height of actual loaded image with attributes set

1 Answers