Javascript - Get Image height

Question

I need to display a bunch of images on a web page using AJAX  All of them have different dimensions  so I want to adjust their size before displaying them  Is there any way to do this in JavaScript   Using PHP s getimagesize   for each image causes an unnecessary performance hit since there will be many images

User · Answer

Try this   var curHeight  var curWidth   function getImgSize imgSrc    var newImg   new Image    newImg src   imgSrc  curHeight   newImg height  curWidth   newImg width

User · Answer

My preferred solution for this would be to do the resizing server-side  so you are transmitting less unnecessary data   If you have to do it client-side though  and need to keep the image ratio  you could use the below   var image from ajax   new Image    image from ajax src   fetch image from ajax       Downloaded via ajax call   image from ajax   rescaleImage image from ajax       Rescale the given image to a max of max height and max width function rescaleImage image name        var max height   100      var max width   100       var height   image name height      var width   image name width      var ratio   height width          If height or width are too large  they need to be scaled down        Multiply height and width by the same value to keep ratio constant     if height  gt  max height                ratio   max height   height          height   height   ratio          width   width   ratio             if width  gt  max width                ratio   max width   width          height   height   ratio          width   width   ratio             image name width   width      image name height   height      return image name

User · Answer

Just load the image in a hidden  lt img gt  tag  style    display none    listen to the load event firing with jQuery  create a new Image   with JavaScript  set the source to the invisible image  and get the size like above

User · Answer

It s worth noting that in Firefox 3 and Safari  resizing an image by just changing the height and width doesn t look too bad  In other browsers it can look very noisy because it s using nearest-neighbor resampling  Of course  you re paying to serve a larger image  but that might not matter

User · Answer

but    wouldn t it be better to adjust the image size on the server side rather than transmitting the bytes to the browser and doing it there    When I say adjust the image size  I don t mean set the height and width in the HTML image tag    If you do that  you are still shipping a large number of bytes from server to client   I mean  actually manipulate the image itself server side   I have  NET C  code here that takes that approach  but there must be a php way to do it too   http   ifdefined com www gallery html  Also  by doing it server side  that opens up the possibility of doing the adjustment just once and then saving the adjusted image  which would be very fast

User · Answer

Do you want to adjust the images themselves  or just the way they display  If the former  you want something on the server side  If the latter  you just need to change image height and image width

User · Answer

I was searching a solution to get height and width of an image using JavaScript  I found many  but all those solutions only worked when the image was present in browser cache   Finally I found a solution to get the image height and width even if the image does not exist in the browser cache    lt script type  text javascript  gt     var imgHeight    var imgWidth     function findHHandWW         imgHeight   this height      imgWidth   this width      return true         function showImage imgPath        var myImage   new Image        myImage name   imgPath      myImage onload   findHHandWW      myImage src   imgPath       lt  script gt    Thanks   Binod Suman  http   binodsuman blogspot com 2009 06 how-to-get-height-and-widht-of-image html

User · Answer

Try with JQuery    lt script type  text javascript  gt  function jquery get width height         var imgWidth       img   width        var imgHeight       img   height        alert  JQuery --      imgWidth      imgWidth     - imgHeight      imgHeight      lt  script gt    or   lt script type  text javascript  gt  function javascript get width height         var img   document getElementById  img        alert  JavaSript --      imgWidth      img width     - imgHeight      img height      lt  script gt

User · Answer

You can use img naturalWidth and img naturalHeight to get real dimension of image in pixel

User · Answer

Well   there are several ways to interpret this question   The first way and the way I think you mean is to simply alter the display size so all images display the same size   For this  I would actually use CSS and not JavaScript   Simply create a class that has the appropriate width and height values set  and make all  lt img gt  tags use this class   A second way is that you want to preserve the aspect ration of all the images  but scale the display size to a sane value   There is a way to access this in JavaScript  but I ll need a bit to write up a quick code sample   The third way  and I hope you don t mean this way  is to alter the actual size of the image   This is something you d have to do on the server side  as not only is JavaScript unable to create images  but it wouldn t make any sense  as the full sized image has already been sent

[javascript] Javascript - Get Image height

Examples related to javascript

Examples related to ajax