Getting width and height from a picture file

Discussion in 'Javascript' started by Joaquim Amado Lopes, Feb 6, 2008.

  1. Greetings.

    Is there any way, in Javascript, to put in 2 variables the width and
    height of a picture, given the filename and without the picture being
    displayed in the webpage?

    Thank you,
    Joaquim Amado Lopes
     
    Joaquim Amado Lopes, Feb 6, 2008
    #1
    1. Advertising

  2. Joaquim Amado Lopes

    Evertjan. Guest

    Joaquim Amado Lopes wrote on 07 feb 2008 in comp.lang.javascript:

    > Is there any way, in Javascript, to put in 2 variables the width and
    > height of a picture, given the filename and without the picture being
    > displayed in the webpage?


    Just put the img outside the viewable window

    style='position:absolute;left:-1000px;'

    and then measure it.

    I think.

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Feb 6, 2008
    #2
    1. Advertising

  3. Greetings.

    On 06 Feb 2008 23:06:41 GMT, "Evertjan."
    <> wrote:
    >> Is there any way, in Javascript, to put in 2 variables the width and
    >> height of a picture, given the filename and without the picture being
    >> displayed in the webpage?

    >
    >Just put the img outside the viewable window
    >
    >style='position:absolute;left:-1000px;'
    >
    >and then measure it.
    >
    >I think.
    >

    It's not practical for what I need.

    I have a form to publish articles, in which the user chooses the
    picture to display with the article.
    The list of pictures is collected from a folder and presented in a
    SELECT form field. As the user chooses one of the items on the list
    (onChange), that picture is previewed.

    As some of the pictures may be quite large and must be previewed with
    reduced dimensions, I need to know the dimensions of each picture
    before displaying it, to determine the width and height of the preview
    and maintain the proportions.

    Cheers,
    Joaquim Amado Lopes
     
    Joaquim Amado Lopes, Feb 6, 2008
    #3
  4. Joaquim Amado Lopes <.> writes:

    > Greetings.
    >
    > On 06 Feb 2008 23:06:41 GMT, "Evertjan."
    > <> wrote:
    >>> Is there any way, in Javascript, to put in 2 variables the width and
    >>> height of a picture, given the filename and without the picture being
    >>> displayed in the webpage?

    >>
    >>Just put the img outside the viewable window
    >>
    >>style='position:absolute;left:-1000px;'
    >>
    >>and then measure it.
    >>
    >>I think.
    >>

    > It's not practical for what I need.
    >
    > I have a form to publish articles, in which the user chooses the
    > picture to display with the article.
    > The list of pictures is collected from a folder and presented in a
    > SELECT form field. As the user chooses one of the items on the list
    > (onChange), that picture is previewed.
    >
    > As some of the pictures may be quite large and must be previewed with
    > reduced dimensions, I need to know the dimensions of each picture
    > before displaying it, to determine the width and height of the preview
    > and maintain the proportions.


    Then you may be out of luck: to determine the dimensions you *will* have
    to examine the content of the image stream. How much of the content
    you'll need is dependent on the type of image. You may need most or all
    of it.

    You could possibly be able to hack something together for the major file
    types using Ajax, but I would suggest you move all of that to the
    server, where there are plenty of libraries and resources that will
    handle this much better.

    Joost.
     
    Joost Diepenmaat, Feb 6, 2008
    #4
  5. Greetings.

    On Thu, 07 Feb 2008 00:42:31 +0100, Joost Diepenmaat <>
    wrote:
    [snip]
    >> I have a form to publish articles, in which the user chooses the
    >> picture to display with the article.
    >> The list of pictures is collected from a folder and presented in a
    >> SELECT form field. As the user chooses one of the items on the list
    >> (onChange), that picture is previewed.
    >>
    >> As some of the pictures may be quite large and must be previewed with
    >> reduced dimensions, I need to know the dimensions of each picture
    >> before displaying it, to determine the width and height of the preview
    >> and maintain the proportions.

    >
    >Then you may be out of luck: to determine the dimensions you *will* have
    >to examine the content of the image stream. How much of the content
    >you'll need is dependent on the type of image. You may need most or all
    >of it.
    >
    >You could possibly be able to hack something together for the major file
    >types using Ajax, but I would suggest you move all of that to the
    >server, where there are plenty of libraries and resources that will
    >handle this much better.
    >

    I wasn't clear in my previous post. The images are on the server.
    The upload part is already working.

    Cheers,
    Joaquim Amado Lopes
     
    Joaquim Amado Lopes, Feb 7, 2008
    #5
  6. Joaquim Amado Lopes <.> writes:

    >>> As some of the pictures may be quite large and must be previewed with
    >>> reduced dimensions, I need to know the dimensions of each picture
    >>> before displaying it, to determine the width and height of the preview
    >>> and maintain the proportions.

    >>
    >>Then you may be out of luck: to determine the dimensions you *will* have
    >>to examine the content of the image stream. How much of the content
    >>you'll need is dependent on the type of image. You may need most or all
    >>of it.
    >>
    >>You could possibly be able to hack something together for the major file
    >>types using Ajax, but I would suggest you move all of that to the
    >>server, where there are plenty of libraries and resources that will
    >>handle this much better.
    >>

    > I wasn't clear in my previous post. The images are on the server.
    > The upload part is already working.


    Well, if you know the dimensions on the server, just use an Ajax to
    fetch them:

    http://developer.mozilla.org/en/docs/AJAX:Getting_Started

    Note that that text uses XML in the response. It's usually easier and
    faster to use a javascript response and eval() it to parse the data.
    See also http://www.json.org/

    Joost.
     
    Joost Diepenmaat, Feb 7, 2008
    #6
  7. Gretings.

    Thank you, Evertjan and Joost, for your help.

    Ajax seems interesting but is too complex for what I need.

    I ended up following Evertjan's suggestion and included all images in
    the page, way out of the window...

    <img src="image_1.gif"
    style="position:absolute;left:-10000px;top:-10000px">
    ....
    <img src="image_n.gif"
    style="position:absolute;left:-10000px;top:-10000px">

    .... so they are loaded before they are required, and used...

    document.hiddenimage.src = "image_x.gif";
    imagewidth = document.hiddenimage.width;
    imageheight = document.hiddenimage.height;

    .... and then processed "imagewidth" and "imageheight".

    Just need to check if it is cross-browser.

    Thank you again and take care,
    Joaquim Amado Lopes
     
    Joaquim Amado Lopes, Feb 7, 2008
    #7
  8. Joaquim Amado Lopes

    Evertjan. Guest

    Joaquim Amado Lopes wrote on 07 feb 2008 in comp.lang.javascript:

    > Greetings.
    >
    > On 06 Feb 2008 23:06:41 GMT, "Evertjan."
    > <> wrote:
    >>> Is there any way, in Javascript, to put in 2 variables the width and
    >>> height of a picture, given the filename and without the picture being
    >>> displayed in the webpage?

    >>
    >>Just put the img outside the viewable window
    >>
    >>style='position:absolute;left:-1000px;'
    >>
    >>and then measure it.
    >>
    >>I think.
    >>

    > It's not practical for what I need.
    >
    > I have a form to publish articles, in which the user chooses the
    > picture to display with the article.
    > The list of pictures is collected from a folder and presented in a
    > SELECT form field. As the user chooses one of the items on the list
    > (onChange), that picture is previewed.
    >
    > As some of the pictures may be quite large and must be previewed with
    > reduced dimensions, I need to know the dimensions of each picture
    > before displaying it, to determine the width and height of the preview
    > and maintain the proportions.


    Doing this clientside without downloading seems impossible.

    I suppose you better use a serverside javascript solution, like:

    http://www.aspjpeg.com/object_aspjpeg.html#OriginalHeight
    http://www.aspjpeg.com/object_aspjpeg.html#OriginalWidth


    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Feb 7, 2008
    #8
  9. Joaquim Amado Lopes wrote:
    > Is there any way, in Javascript, to put in 2 variables the width and
    > height of a picture, given the filename and without the picture being
    > displayed in the webpage?


    Besides using DOM mutator methods and script properties to add a hidden
    element to the DOM tree (which requires NN4 DOM or CSS support), you may
    try this proprietary approach:

    var width, height;

    var img = new Image();

    img.onload = function()
    {
    width = this.width;
    height = this.height;
    };

    img.src = "http://foo.example/bar.jpg";

    It should be supported where the script engine is compatible to JavaScript
    1.3 (NN 4) or later, but there is no guarantee as Image essentially is a
    feature provided by the host environment (which was NN 3 or later then).

    In any case, it strikes me as being much less of a dirty hack than what you
    have chosen to do.

    Be sure that you do feature tests at runtime no matter the approach you
    are using.


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
     
    Thomas 'PointedEars' Lahn, Feb 10, 2008
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Lois
    Replies:
    1
    Views:
    3,307
    Ryan Stewart
    Dec 27, 2004
  2. cera
    Replies:
    1
    Views:
    1,301
    Neredbojias
    Aug 18, 2007
  3. David Basford
    Replies:
    3
    Views:
    2,469
    BootNic
    Sep 30, 2007
  4. Bernd Meier
    Replies:
    6
    Views:
    529
    GTalbot
    Jan 14, 2008
  5. Replies:
    8
    Views:
    1,298
    Mick White
    Apr 19, 2005
Loading...

Share This Page