How to find image width and height using javascript

[PerumalSamy]

Hi, I am developing program using asp.net in which i am using javascript coding in particular part.

I need to find height and width for loaded image file.

How can i write coding for it.

[dmjpro]

u can check it by it's style property or by offsetHeight and offsetWidth.

kind regards.
dmjpro.

[acoder]

Using the height and width properties. See link.

If you get stuck, post some code.

[PerumalSamy]

I need to find height and width for uploaded images.

Ex: if uploaded image file is C:\Documents and Settings\My Documents\My Pictures\globe_img.gif, then i need to find the image height and width for the image globe_img.gif by assigning to local image variables.

Any idea.

[dmjpro]

it needs advanced but non-standard JS.
that means from client side the file properties sholud be opened.
and mind it that is possible using standard JS.
in IE it is possible using ActivexObject.
and it is not standard JS.


kind regards.
dmjpro.

[acoder]

I need to find height and width for uploaded images.

Ex: if uploaded image file is C:\Documents and Settings\My Documents\My Pictures\globe_img.gif, then i need to find the image height and width for the image globe_img.gif by assigning to local image variables.

Any idea.

I'm afraid this is not possible. I had an image preview script, but could only get the width and height of local images by performing a quick upload to a temporary directory and then reading the values from the uploaded image. IE6 allowed you to read the properties of local files. I'm not sure about IE7. Firefox and other browsers don't.

[dmjpro]

after uploading it is possible ... but he wants to validate the height and width from the client side.

that's why i wrote this.

kind regards.
dmjpro.

[PerumalSamy]

Thanks for your reply.

Now i got the solution by executing the following code

<script language="javascript">
function imgdisp()
{
document.getElementById("img1").src=document.getElementById_("File1").value;
}
function disp1()
{
document.getElementById("img1").style.width="";
document.getElementById("img1").style.width="";
        var newImg = new Image();
        newImg.src = document.getElementById("File1").value;
        var height = newImg.height;
        var width = newImg.width;
        if (width>500)
        {
        document.getElementById("img1").style.width=500;
        }
        }
        </script>
 

In function imgdisp(), i am assigning image from client to html image tool.

<INPUT onpropertychange="imgdisp()" style="Z-INDEX: 101; LEFT: 160px; POSITION: absolute; TOP: 104px"
                type="file" id="File1" runat="server"> 
 

Then i am calling function disp1() in html image tool as mentioned below

                <IMG onresize="disp1()"  style="Z-INDEX: 102; LEFT: 40px; POSITION: absolute; TOP: 160px"
                alt="" src="" id="img1">

[micjohnson]

use the below.

<SCRIPT language="Javascript">
     function funcName1() {
 
    imgFile.src = "../image/imageName1.gif"
 
    var getHeight = imgFile.height;
    var getWidth = imgFile.width;
 
    alert(getHeight);
    alert(getWidth);
}
</SCRIPT>
 

Thats it.

Regards
micJ

[acoder]

Welcome to TSDN!

Please remember to use code tags when posting code
[CODE=javascript]like this...[/code]

Your solution is for an already loaded file, not a file to be uploaded from the client-side.

[BinodSuman]

I was searching a solution to get height and widht of an image using javascript. I got many but all those solution only worked when image present in browser cache.

Finally I got one solution to get image height and width even image does not exist in browser cache. Just I want to share all of you.

<script type="text/javascript" language="javascript1.2">
 
var imgHeight;
var imgWidth;
 
function findHHandWW() {
imgHeight = this.width;imgWidth = this.width;return true;
}
 
function showImage(imgPath) {
var myImage = new Image();
myImage.name = imgPath;
myImage.onload = findHHandWW;
myImage.src = imgPath;
}
</script>
 

Thanks,

Binod Suman

[acoder]

That's fine, but you could always let the image load in the background instead. If you need the dimensions straight away, you'd need the image to be loaded already, otherwise they'd be a delay unless it's a small image or a very fast connection.