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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    209
    Thanks
    52
    Thanked 1 Time in 1 Post

    Javascript image measuring?

    Is there a method or methods for measuring images (to get the height and width of an image). I would think there would be.

    I use php on the server side with the graphics generation extensions but that
    can be tedious to measure a bunch of graphics and sent the values to javascript in the client.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    img.naturalHeight or just img.height if the image is fully loaded and a height attrib is not set. the other dimension is called, wait for it, : ".width"...

    width * height = area;
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by anotherJEK View Post
    Is there a method or methods for measuring images (to get the height and width of an image). I would think there would be.

    I use php on the server side with the graphics generation extensions but that
    can be tedious to measure a bunch of graphics and sent the values to javascript in the client.
    If you don't have a width and height for the image already specified in the HTML then simply accessing the width and height of the image directly will give it to you. If these are specified in the HTML then create a new Image() in JavaScript and attach the image you want to the src of that and then test the width and height there.

    Code:
    cpyImg = new Image();
    cpyImg.src = 'someimage.jpg';
    alert(cpyImg.width + ' '+ cpyImg.height);
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by felgall View Post
    If you don't have a width and height for the image already specified in the HTML then simply accessing the width and height of the image directly will give it to you. If these are specified in the HTML then create a new Image() in JavaScript and attach the image you want to the src of that and then test the width and height there.

    Code:
    cpyImg = new Image();
    cpyImg.src = 'someimage.jpg';
    alert(cpyImg.width + ' '+ cpyImg.height);
    Do we not have to wait for the image to load?
    Code:
    cpyImg = new Image();
    cpyImg.onload = function () {
        alert(cpyImg.width + ' '+ cpyImg.height);
    };
    cpyImg.src = 'someimage.jpg';
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New Coder
    Join Date
    Feb 2013
    Posts
    45
    Thanks
    8
    Thanked 0 Times in 0 Posts
    edit -ignore

    wrong thread.

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by AndrewGSW View Post
    Do we not have to wait for the image to load?
    no, he's talking about one that already exists in the page with hard-coded dimensions. If the JS comes after the <img> tag and if the script waits for window.onload(), then the image will populate immediately when the new Image's .src is assigned in JavaScript.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by rnd me View Post
    no, he's talking about one that already exists in the page with hard-coded dimensions. If the JS comes after the <img> tag and if the script waits for window.onload(), then the image will populate immediately when the new Image's .src is assigned in JavaScript.
    Thank you - it wasn't clear to me that the image was being directly inserted into the page.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    209
    Thanks
    52
    Thanked 1 Time in 1 Post

    The use

    img.naturalHeight or just img.height if the image is fully loaded and a height attrib is not set. the other dimension is called, wait for it, : ".width"...

    width * height = area;
    The use for this is to create thumbnail versions of images loaded without
    having to have separate thumbnail sized images. It can also use info
    from client.screenWidth/Height info. As though setting a scaling factor based on this information.

    I have been looking or this and haven't found it from the texts I have.
    Is this a new feature or just one I've missed in the past.
    I do know about preloading images, for rollovers for instance. The question
    then becomes: can the onload event be used in conjunction with preloading
    code? (perhaps this would be a job for a web worker script).

    Actually, in looking back, the height and width arguments fed to new Image()
    have to already be established. To my knowledge javascript does not have a means for
    actually measuring the image to get these values. They either have to be hand coded in the image
    tags, pre-defined in javascript code or produced by a server script like php that does have functions
    for measuring images.

    It would be nice if there was a method like Image.getHeight() and Image.getWidth()
    Last edited by anotherJEK; 03-12-2013 at 06:55 AM. Reason: further investigations


  •  

    Posting Permissions

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