How to get Natural image width and height?

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Ben
    #1

    How to get Natural image width and height?

    Hi at all

    I am looking for the natural size of an image

    I found this function :

    while ((imgHeight = image.getHeight (this)) == -1 ) {

    // loop until image loaded

    }

    while ((imgWidth = image.getWidth( this)) == -1 ) {

    // loop until image loaded

    }

    But firefox errors console write that getWidth is not a valid function

    Pleae can you tell me if there is a wrong into my code or how can I get the
    width and height of an images with others methods?

    Thenk you very much


    Tags: None
    • dino @ wrk
      #2
      Re: How to get Natural image width and height?


      "Ben" <ben@nospam.itw rote in message
      news:TzASj.3002 88$%k.405325@tw ister2.libero.i t...
      Hi at all
      >
      I am looking for the natural size of an image
      did you try to append some onload handler to the image?

      let's say variable image stores reference to your dom image node. try this:

      image.onload = function() {
      imgHeight = this.height;
      imgWidth = this.width;
      }


      just writing from head now, but something like this should work...


      cheers


        Comment

        • SAM
          #3
          Re: How to get Natural image width and height?

          Ben a écrit :
          >
          But firefox errors console write that getWidth is not a valid function
          did you code it ?
          or do you use prototype's library ?


          <html>
          <style type="text/css">
          img { width: 100px; }
          </style>
          <script type="text/javascript">
          function getSize(imgId) {
          var i = document.getEle mentById(imgId) ;
          var siz = function(what) {
          what.widss = what.naturalWid th? what.naturalWid th : what.width;
          what.heigt = what.naturalHei ght? what.naturalHei ght : what.height;
          return what;
          }
          i = siz(i);
          if(!i.widss) setTimeout(func tion(){getSize( imgId)},200);
          else
          return [i.widss, i.heigt];
          }
          window.onload = function() {
          alert(getSize(' V_2').join(' '));
          }
          </script>
          All images displayed in 100px width :
          <img src="http://i11.ebayimg.com/01/i/000/ed/13/575b_1.JPG" alt="" id="V_1"
          onload="alert(t his.width+' '+this.height); ">
          <img src="http://i16.ebayimg.com/01/i/000/ed/13/562b_1.JPG" alt="" id="V_2">
          <img src="http://i3.ebayimg.com/03/i/000/e2/fe/aa08_1.JPG" alt="" id="V_3">
          size of image #:
          <select
          onclick="alert( getSize('V_'+(+ this.selectedIn dex+1)).join(' '))">
          <option>1
          <option>2
          <option>3
          </select>
          </html>

          --
          sm

            Comment

            • SAM
              #4
              Re: How to get Natural image width and height?

              dino @ wrk a écrit :
              >
              let's say variable image stores reference to your dom image node. try this:
              >
              image.onload = function() {
              imgHeight = this.height;
              imgWidth = this.width;
              }
              >
              >
              just writing from head now, but something like this should work...
              if image was sized by CSS you'll get the CSS's size

              prefer to try : naturalWidth naturalHeight
              (after testing this attributes are known)

              --
              sm

                Comment

                • Ugo
                  #5
                  Re: How to get Natural image width and height?

                  >let's say variable image stores reference to your dom image node. try this:
                  >>
                  >image.onload = function() {
                  > imgHeight = this.height;
                  > imgWidth = this.width;
                  >}
                  >just writing from head now, but something like this should work...
                  >
                  if image was sized by CSS you'll get the CSS's size
                  is not true!
                  prefer to try : naturalWidth naturalHeight
                  not standard
                  (after testing this attributes are known)
                  if YOU prefer to try naturalWidth... , it is more elegant using the OR
                  operator, so:
                  what.widss = what.naturalWid th || what.width;
                  instead of:
                  what.widss = what.naturalWid th? what.naturalWid th : what.width;

                    Comment

                    • Ugo
                      #6
                      Re: How to get Natural image width and height?

                      >if image was sized by CSS you'll get the CSS's size
                      is not true!
                      sorry, that's true

                        Comment

                        • Ugo
                          #7
                          Re: How to get Natural image width and height?

                          [cut]
                          how can I get the
                          width and height of an images with others methods?
                          I propose this way:

                          /* your function that manages the dimensione passed by param*/
                          function useDim( w, h )
                          {
                          alert( w );
                          alert( h );
                          }
                          /* "my" function that gets the dimensions and launches the function passed
                          by param (if defined)*/
                          function getSize( imgPath, fun )
                          {
                          var img = new Image( );

                          img.onload = function( )
                          {
                          if( fun = fun || null )
                          fun( this.width, this.height );
                          }

                          img.src = imgPath;
                          }

                          you can use this function into onload of the page or anyway in your code,
                          so:

                          getSize( 'images/img.gif', useDim );

                            Comment

                            • SAM
                              #8
                              Re: How to get Natural image width and height?

                              Ugo a écrit :
                              >>if image was sized by CSS you'll get the CSS's size
                              >is not true!
                              >
                              sorry, that's true
                              Me too I thought it wasn't :-)

                              It's only true if you set css's sizes via JS

                              <img style="width:10 0px" ...

                              where I expect we get :
                              - image.width (natural width)
                              - image.style.wid th (apparent width)
                              (height is proportionnal)

                              --
                              sm

                                Comment

                                • SAM
                                  #9
                                  Re: How to get Natural image width and height?

                                  Ugo a écrit :
                                  [cut]
                                  >how can I get the
                                  >width and height of an images with others methods?
                                  >
                                  I propose this way:
                                  Unfortunately it seems that doesn't work with my Safari
                                  (I think that it doesn't like 'onload' with new image !?)
                                  /* "my" function that gets the dimensions and launches the function passed
                                  by param (if defined)*/
                                  function getSize( imgPath, fun )
                                  {
                                  var img = new Image( );
                                  >
                                  img.onload = function( )
                                  {
                                  if( fun = fun || null )
                                  fun( this.width, this.height );
                                  }
                                  >
                                  img.src = imgPath;
                                  }

                                  --
                                  sm

                                    Comment

                                    • jdalton
                                      #10
                                      Re: How to get Natural image width and height?

                                      Here is a cross browser example implementation of Hedger Wang
                                      technique.
                                      Page Not Found - Caboo
                                      http://pastie.caboo.se/190528

                                        Comment

                                        • Ugo
                                          #11
                                          Re: How to get Natural image width and height?

                                          Unfortunately it seems that doesn't work with my Safari

                                          I knew about some problems with Safari and own managment of onload image,
                                          but I thought new versions had solved this bug
                                          .... now I just tried with my Safari (win version) and works well, boh...
                                          (I think that it doesn't like 'onload' with new image !?)
                                          yes, the problem was that...

                                            Comment

                                            Previous template Next
                                            Working...