Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Sep 2002
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to Get Width and Height of a JPG Image

    Hello,

    Can someone please give me a simple example how to get the width and height of a JPG image?

    function imagesize(picName, w, h)
    {
    var w = ..........
    var h = ..........
    }

    Thanks in advance.
    Richard

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts

    finding image size

    can try:

    i find it easy to set an id to all my elements i will be accessing with script. so first off set an id to your image:

    <img src='yourimage.jpg' id='img1'>

    then you can do as follows:

    var image=document.getElementById('img1');
    alert(image.style.width+' '+image.style.height);


    and if that doesnt work try detecting its offset with and height.

    alert(image.offsetWidth+' '+image.offsetHeight);


    now using the offsetWidth/Height in explorer will return the width of the element (ie your image) but it will also add in the width of the images border (typically 1 pixel on all sides, so 2 pixels wider and 2 pixels taller)
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    New Coder
    Join Date
    Sep 2002
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <td><a href="Javascript:showPic('xx.jpg', 'img1')"><img src="xx.jpg" id="img1" width="150"></a></td>
    Code:
    function showPic(picName, imgId)
    {
    var image=document.getElementById('imgId');
    alert(image.style.width+' '+image.style.height);
    // what follows creates the window with image size
    }
    Thank your for trying to help me, but the above code does not work, according to your reply. What am I missing?

    Richard.

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    It's still advisable to use height and width attributes in img elements.
    So, this means you should be able to address them as properties of an img element.

    e.g.
    Code:
    imgObj.height
    
    - or -
    
    imgObj.getAttribute('height')

  • #5
    New Coder
    Join Date
    Sep 2002
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Bill, but how to include this portion in the function ShowPic()?

    I am rather novice you see, and don't know well how to do that. Anyway I appreciate you try to help me.

    Richard

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Code:
    function showPic(picName, imgId) {
    
    	var image=document.getElementById('imgId');
    	alert(image.width+' '+image.height);
    	// what follows creates the window with image size
    
    }
    If all the relevant images are nested directly within such anchor links, then you don't actually need to reference the img's id or src directly.

    e.g.
    Code:
    function showPic(linkEl) {
    
    	var image=linkEl.childNodes[0];
    	alert(image.width+' '+image.height);
    	// what follows creates the window with image size
    
    }
    markup:
    Code:
    <td><a href="#" onclick="showPic(this); return false;"><img src="xx.jpg" id="img1" width="150" height="200"></a></td>

    Why do you wish to open a new window to display an image at the same size it's currently being displayed?
    Or is this supposed to be a thumbnail gallery type thing, where you click on a thumbnail and view the larger version?
    Last edited by Bill Posters; 07-10-2006 at 12:57 PM.

  • #7
    New Coder
    Join Date
    Sep 2002
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, thank you Bill, it works, but..... (there is always a but)...

    the function code with linkEl shows the size of the image that is reduced to 150x200 for the display as a thumbnail, but of course I need the size of the real image (that is larger).

    I think the markup needs an adjustment in the onclick= in order to work. But what is the syntax please?

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Are you saying that you're using the full-size version as the thumbnail and just reducing the dimensions in the img height/width attributes to make it appear smaller?
    If so, then you should avoid doing it that way, as you force users to download all the images at full-size (i.e. at larger byte sizes) when they may only choose to click on one or two of the thumbnails.
    It really is inefficient and should be avoided as a practice.

    You won't be able to reference attributes of the larger version using js unless it's been loaded into the page.
    Obviously, you don't want to preload it as that would be very inefficient.

    Do you have PHP enabled on your host server?
    If you do, then that could be used to read the dimensions of the as-yet-unloaded large image file.
    The function to look at is getimagesize().

    It will still be a little complex as you need to weave PHP into the js (or somehow echo the dimensions of the large version into an attribute of either the thumbnail or its parent anchor.
    If you have a large number of thumbnails and wish to keep the functionality as automated as possible, then a combination of js and PHP is likely to be the only way to achieve it.

    You might look into using a prefrabricated PHP thumbnail, gallery or automated directory contents browsing scripts as these often carry all the components you need to automate the process.
    (I tend to write my own as and when I need something like that.)
    Last edited by Bill Posters; 07-10-2006 at 01:41 PM.

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    
    var SRCAry=[];
    var SRCCnt=0;
    var TO;
    
    function ImgSz(img,swp,wth){
     swp=swp||'';
     wth=wth||'';
     SRCCnt++;
     clearTimeout(TO);
     SRCAry[SRCCnt]=new Image();
     SRCAry[SRCCnt].src=img.replace(swp,wth);
     CkLoad();
    }
    
    function CkLoad(){
     if (!SRCAry[SRCCnt].complete){
      TO=setTimeout('CkLoad()',100);
     }
     else {
      alert(SRCAry[SRCCnt].width+' * '+SRCAry[SRCCnt].height);
     }
    }
    
    //-->
    </script>
    </head>
    
    <body>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" onclick="ImgSz(this.src);"  >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50" onclick="ImgSz(this.src);"  >
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •